@decidables/prospectable-elements 0.5.2 → 0.6.0

package/lib/prospectableElements.esm.js

@@ -10516,18 +10516,6 @@ class DecidablesElement extends i$2 {
   getComputedStyleValue(property) {
     return getComputedStyle(this).getPropertyValue(property).trim();
   }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Use focus highlighting if keyboard is used at all
-    select(this.renderRoot.host).classed('keyboard', true).on('mousemove.keyboard touchstart.keyboard', event => {
-      const element = event.currentTarget;
-      select(element.renderRoot.host).classed('keyboard', false).on('mousemove.keyboard touchstart.keyboard', null);
-    }).on('keydown.keyboard', event => {
-      const element = event.currentTarget;
-      select(element.renderRoot.host).classed('keyboard', true).on('keydown.keyboard mousemove.keyboard touchstart.keyboard', null);
-    });
-  }
   static get greys() {
     const grey = '#999999';
     const greys = {};
@@ -10663,7 +10651,7 @@ class DecidablesElement extends i$2 {
     };
     /* eslint-enable key-spacing, object-curly-newline */
   }
-  static cssBoxShadow(elevation, rotate = false, inverse = false) {
+  static cssBoxShadow(elevation, inverse = false) {
     const umbraO = this.shadows.opacityUmbra + this.shadows.opacityBoost;
     const penumbraO = this.shadows.opacityPenumbra + this.shadows.opacityBoost;
     const ambientO = this.shadows.opacityAmbient + this.shadows.opacityBoost;
@@ -10673,9 +10661,9 @@ class DecidablesElement extends i$2 {
     const umbraM = this.shadows.mapUmbra[elevation];
     const penumbraM = this.shadows.mapPenumbra[elevation];
     const ambientM = this.shadows.mapAmbient[elevation];
-    const umbraS = rotate ? `${-umbraM.y}px ${umbraM.y / 2}px ${umbraM.b}px ${umbraM.s}px` : `${umbraM.y / 2}px ${umbraM.y}px ${umbraM.b}px ${umbraM.s}px`;
-    const penumbraS = rotate ? `${-penumbraM.y}px ${penumbraM.y / 2}px ${penumbraM.b}px ${penumbraM.s}px` : `${penumbraM.y / 2}px ${penumbraM.y}px ${penumbraM.b}px ${penumbraM.s}px`;
-    const ambientS = rotate ? `${-ambientM.y}px ${ambientM.y / 2}px ${ambientM.b}px ${ambientM.s}px` : `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
+    const umbraS = `${umbraM.y / 2}px ${umbraM.y}px ${umbraM.b}px ${umbraM.s}px`;
+    const penumbraS = `${penumbraM.y / 2}px ${penumbraM.y}px ${penumbraM.b}px ${penumbraM.s}px`;
+    const ambientS = `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
     return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
   }
   static get svgFilters() {
@@ -10811,49 +10799,58 @@ class DecidablesButton extends DecidablesElement {
         button {
           width: 100%;
           height: 100%;
+
           padding: 0.375rem 0.75rem;
 
           font-family: var(---font-family-base);
           font-size: 1.125rem;
+
           line-height: 1.5;
+
           color: var(---color-text-inverse);
 
+          outline: none;
+
           border: 0;
           border-radius: var(---border-radius);
-          outline: none;
         }
 
         button:disabled {
-          background-color: var(---decidables-button-background-color-disabled);
           outline: none;
+
+          background-color: var(---decidables-button-background-color-disabled);
           box-shadow: none;
         }
 
         button:enabled {
           cursor: pointer;
+          outline: none;
 
           background-color: var(---decidables-button-background-color-enabled);
-          outline: none;
           box-shadow: var(---shadow-2);
         }
 
         button:enabled:hover {
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
         button:enabled:active {
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
 
-        :host(.keyboard) button:enabled:focus {
+        button:enabled:focus-visible {
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) button:enabled:focus:active {
+        button:enabled:focus-visible:active {
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
       `];
@@ -10970,10 +10967,6 @@ class DecidablesSlider extends DecidablesElement {
           ---decidables-slider-color: var(--decidables-slider-color, var(---color-element-enabled));
           ---decidables-spinner-background-color: var(--decidables-slider-background-color, none);
 
-          ---shadow-2-rotate: var(--shadow-2-rotate, ${r$4(this.cssBoxShadow(2, true, false))});
-          ---shadow-4-rotate: var(--shadow-4-rotate, ${r$4(this.cssBoxShadow(4, true, false))});
-          ---shadow-8-rotate: var(--shadow-8-rotate, ${r$4(this.cssBoxShadow(8, true, false))});
-
           display: flex;
 
           flex-direction: column;
@@ -10988,12 +10981,14 @@ class DecidablesSlider extends DecidablesElement {
 
         .range {
           position: relative;
+
           display: flex;
 
           flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
+
           margin: 0 0.25rem 0.25rem;
         }
 
@@ -11005,21 +11000,20 @@ class DecidablesSlider extends DecidablesElement {
           background: var(---decidables-spinner-background-color);
         }
 
-        /* Adapted from http://danielstern.ca/range.css/#/ */
         /* Overall */
         input[type=range] {
-          width: 4.75rem;
-          height: 3.5rem;
+          width: 3.5rem;
+          height: 4.75rem;
+
           padding: 0;
           margin: 0;
+          
+          appearance: none;
 
           background-color: unset;
 
-          transform: rotate(-90deg);
-          transform-origin: 2.375rem 2.375rem;
-
-          /* stylelint-disable-next-line property-no-vendor-prefix */
-          -webkit-appearance: none;
+          direction: rtl;
+          writing-mode: vertical-lr;
         }
 
         input[type=range]:enabled {
@@ -11030,16 +11024,10 @@ class DecidablesSlider extends DecidablesElement {
           outline: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-tooltip {
-          display: none;
-        }
-
         /* Track */
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-webkit-slider-runnable-track {
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
 
           background: var(---decidables-slider-background-color);
           border: 0;
@@ -11051,10 +11039,9 @@ class DecidablesSlider extends DecidablesElement {
           background: var(---decidables-slider-background-color);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-moz-range-track {
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
 
           background: var(---decidables-slider-background-color);
           border: 0;
@@ -11062,57 +11049,17 @@ class DecidablesSlider extends DecidablesElement {
           box-shadow: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-track {
-          width: 100%;
-          height: 4px;
-
-          color: transparent;
-
-          background: transparent;
-          border-color: transparent;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-fill-lower {
-          background: #cccccc;
-          /* background: var(---decidables-slider-background-color); */
-          border: 0;
-          border-radius: 2px;
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-fill-upper {
-          background: #cccccc;
-          /* background: var(---decidables-slider-background-color); */
-          border: 0;
-          border-radius: 2px;
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:focus::-ms-fill-lower {
-          background: var(---decidables-slider-background-color);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:focus::-ms-fill-upper {
-          background: var(---decidables-slider-background-color);
-        }
-
         /* Thumb */
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-webkit-slider-thumb {
-          width: 10px;
-          height: 20px;
-          margin-top: -8px;
+          width: 20px;
+          height: 10px;
+
+          margin-left: -8px;
+
+          appearance: none;
 
           border: 0;
           border-radius: 4px;
-
-          /* stylelint-disable-next-line property-no-vendor-prefix */
-          -webkit-appearance: none;
         }
 
         input[type=range]:disabled::-webkit-slider-thumb {
@@ -11122,112 +11069,65 @@ class DecidablesSlider extends DecidablesElement {
 
         input[type=range]:enabled::-webkit-slider-thumb {
           background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
+          box-shadow: var(---shadow-2);
         }
 
         input[type=range]:enabled:hover::-webkit-slider-thumb {
-          box-shadow: var(---shadow-4-rotate);
+          box-shadow: var(---shadow-4);
         }
 
         input[type=range]:enabled:active::-webkit-slider-thumb {
-          box-shadow: var(---shadow-8-rotate);
+          box-shadow: var(---shadow-8);
         }
 
-        :host(.keyboard) input[type=range]:enabled:focus::-webkit-slider-thumb {
-          box-shadow: var(---shadow-4-rotate);
+        input[type=range]:enabled:focus-visible::-webkit-slider-thumb {
+          box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=range]:focus:active::-webkit-slider-thumb {
-          box-shadow: var(---shadow-8-rotate);
+        input[type=range]:enabled:focus-visible:active::-webkit-slider-thumb {
+          box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]::-moz-range-thumb {
-          width: 10px;
-          height: 20px;
+          width: 20px;
+          height: 10px;
 
           border: 0;
           border-radius: 4px;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:disabled::-moz-range-thumb {
           background: var(---decidables-slider-background-color);
           box-shadow: none;
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled::-moz-range-thumb {
           background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
+          box-shadow: var(---shadow-2);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled:hover::-moz-range-thumb {
-          box-shadow: var(---shadow-4-rotate);
+          box-shadow: var(---shadow-4);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
         input[type=range]:enabled:active::-moz-range-thumb {
-          box-shadow: var(---shadow-8-rotate);
-        }
-
-        :host(.keyboard) input[type=range]:enabled:focus::-moz-range-thumb {
-          box-shadow: var(---shadow-4-rotate);
-        }
-
-        :host(.keyboard) input[type=range]:enabled:focus:active::-moz-range-thumb {
-          box-shadow: var(---shadow-8-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]::-ms-thumb {
-          width: 10px;
-          height: 20px;
-          margin-top: 0;
-
-          background: #999999;
-          /* background: var(---color-element-enabled); */
-          border: 0;
-          border-radius: 4px;
-          box-shadow: var(---shadow-2-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:disabled::-ms-thumb {
-          background: var(---decidables-slider-background-color);
-          box-shadow: none;
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled::-ms-thumb {
-          background: var(---decidables-slider-color);
-          box-shadow: var(---shadow-2-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled:hover::-ms-thumb {
-          box-shadow: var(---shadow-4-rotate);
-        }
-
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        input[type=range]:enabled:active::-ms-thumb {
-          box-shadow: var(---shadow-8-rotate);
+          box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line no-descending-specificity */ /* stylelint ERROR */
-        :host(.keyboard) input[type=range]:enabled:focus::-ms-thumb {
-          box-shadow: var(---shadow-4-rotate);
+        input[type=range]:enabled:focus-visible::-moz-range-thumb {
+          box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=range]:enabled:focus:active::-ms-thumb {
-          box-shadow: var(---shadow-8-rotate);
+        input[type=range]:enabled:focus-visible:active::-moz-range-thumb {
+          box-shadow: var(---shadow-8);
         }
 
-        datalist {
+        /* Tick marks */
+        .datalist {
           position: absolute;
           left: 2rem;
           z-index: -1;
+
           display: flex;
 
           flex-direction: column;
@@ -11240,14 +11140,13 @@ class DecidablesSlider extends DecidablesElement {
           font-size: 0.75rem;
         }
 
-        option {
-          padding: 0;
-
+        .option {
           line-height: 0.8;
-          min-block-size: 0;
+
+          white-space: nowrap;
         }
 
-        option::before {
+        .option::before {
           content: "– ";
         }
       `];
@@ -11260,10 +11159,10 @@ class DecidablesSlider extends DecidablesElement {
       <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$2`
-            <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>
+            <div class="datalist">
+              <div class="option">${o$2(this.max)}</div>
+              <div class="option">${o$2(this.min)}</div>
+            </div>
           ` : x$2``}
       </div>
       <decidables-spinner ?disabled=${this.disabled} min=${o$2(this.min)} max=${o$2(this.max)} step=${o$2(this.step)} .value=${this.value} @input=${this.spinnerInputted.bind(this)}></decidables-spinner>
@@ -11323,13 +11222,14 @@ class DecidablesSpinner extends DecidablesElement {
           ---decidables-spinner-prefix: var(--decidables-spinner-prefix, "");
 
           ---decidables-spinner-postfix: var(--decidables-spinner-postfix, "");
-          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0);
+          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0rem);
 
           display: block;
         }
 
         label {
           position: relative;
+
           display: flex;
 
           flex-direction: column;
@@ -11347,6 +11247,7 @@ class DecidablesSpinner extends DecidablesElement {
           left: calc(50% - var(---decidables-spinner-input-width) / 2 + 0.25rem);
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-prefix);
@@ -11358,6 +11259,7 @@ class DecidablesSpinner extends DecidablesElement {
           bottom: 1px;
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-postfix);
@@ -11365,20 +11267,24 @@ class DecidablesSpinner extends DecidablesElement {
 
         input[type=number] {
           width: var(---decidables-spinner-input-width);
-          padding-right: var(---decidables-spinner-postfix-padding);
+
+          padding: 1px var(---decidables-spinner-postfix-padding) 1px 2px;
+          margin: 0;
 
           font-family: var(---font-family-base);
           font-size: var(---decidables-spinner-font-size);
+
           color: inherit;
+
           text-align: right;
 
+          appearance: none;
+          outline: none;
+
           background: none;
           border: 0;
           border-radius: 0;
-          outline: none;
           box-shadow: var(---shadow-2);
-
-          -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
         }
 
         input[type=number]:hover {
@@ -11395,20 +11301,54 @@ class DecidablesSpinner extends DecidablesElement {
 
           border: 0;
           box-shadow: none;
+        }
+
+        /* HACK: Manage spinners in Firefox */
+        @supports (-moz-appearance: textfield) {
+          input[type=number] {
+            padding-right: calc(18px + var(---decidables-spinner-postfix-padding));
+
+            appearance: textfield;
+          }
+
+          input[type=number]:hover,
+          input[type=number]:focus,
+          input[type=number]:active {
+            padding-right: var(---decidables-spinner-postfix-padding);
+
+            appearance: none;
+          }
+
+          input[type=number]:disabled {
+            padding-right: calc(18px + var(---decidables-spinner-postfix-padding));
 
-          /* 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);
+            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));
+          }
         }
       `];
   }
@@ -11472,13 +11412,16 @@ class DecidablesSwitch extends DecidablesElement {
 
           width: 1px;
           height: 1px;
+
           padding: 0;
           margin: -1px;
+
           overflow: hidden;
 
           white-space: nowrap;
 
           border: 0;
+
           clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
         }
 
@@ -11494,6 +11437,7 @@ class DecidablesSwitch extends DecidablesElement {
           position: relative;
 
           min-width: 24px;
+
           padding: 0 0 36px;
           margin: 0.25rem 0.25rem 0;
 
@@ -11505,17 +11449,17 @@ class DecidablesSwitch extends DecidablesElement {
         input[type=checkbox] + label + label::before,
         input[type=checkbox] + label + label::after {
           position: absolute;
-
           left: 50%;
 
           margin: 0;
 
-          content: "";
-
           outline: 0;
 
-          transition: all var(---transition-duration) ease;
+          content: "";
+          
           transform: translate(-50%, 0);
+
+          transition: all var(---transition-duration) ease;
         }
 
         input[type=checkbox] + label + label::before {
@@ -11563,17 +11507,14 @@ class DecidablesSwitch extends DecidablesElement {
           box-shadow: var(---shadow-8);
         }
 
-        /* stylelint-disable-next-line selector-max-compound-selectors */
-        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label::after {
+        input[type=checkbox]:enabled:focus-visible + label + label::after {
           box-shadow: var(---shadow-4);
         }
 
-        /* stylelint-disable selector-max-compound-selectors */
-        :host(.keyboard) input[type=checkbox]:enabled:focus + label + label:active::after,
-        :host(.keyboard) input[type=checkbox]:enabled:focus:active + label + label::after {
+        input[type=checkbox]:enabled:focus-visible + label + label:active::after,
+        input[type=checkbox]:enabled:focus-visible:active + label + label::after {
           box-shadow: var(---shadow-8);
         }
-        /* stylelint-enable selector-max-compound-selectors */
         `];
   }
   render() {
@@ -11693,39 +11634,46 @@ class DecidablesToggleOption extends DecidablesElement {
 
           width: 1px;
           height: 1px;
+
           padding: 0;
           margin: -1px;
+
           overflow: hidden;
 
           white-space: nowrap;
 
           border: 0;
+
           clip-path: inset(100%); /* May cause a performance issue: https://github.com/h5bp/html5-boilerplate/issues/2021 */
         }
 
         input[type=radio] + label {
           width: 100%;
+
           padding: 0.375rem 0.75rem;
 
           font-family: var(---font-family-base);
           font-size: 1.125rem;
+
           line-height: 1.5;
+
           color: var(---color-text-inverse);
+
           text-align: center;
 
           cursor: pointer;
+          outline: none;
 
           background-color: var(---color-element-enabled);
           border: 0;
           border-radius: 0;
-          outline: none;
-
           box-shadow: var(---shadow-2);
         }
 
         input[type=radio]:checked + label {
-          background-color: var(---color-element-selected);
           outline: none;
+
+          background-color: var(---color-element-selected);
           box-shadow: var(---shadow-2);
         }
 
@@ -11733,6 +11681,7 @@ class DecidablesToggleOption extends DecidablesElement {
           z-index: 1;
 
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
@@ -11740,6 +11689,7 @@ class DecidablesToggleOption extends DecidablesElement {
           z-index: 2;
 
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
 
@@ -11753,25 +11703,28 @@ class DecidablesToggleOption extends DecidablesElement {
           border-bottom-left-radius: 0.25rem;
         }
 
-        :host(.keyboard) input[type=radio]:focus + label {
+        input[type=radio]:focus-visible + label {
           z-index: 1;
 
           outline: none;
+
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=radio]:focus:checked + label {
+        input[type=radio]:focus-visible:checked + label {
           z-index: 1;
 
-          background-color: var(---color-element-selected);
           outline: none;
+
+          background-color: var(---color-element-selected);
           box-shadow: var(---shadow-4);
         }
 
-        :host(.keyboard) input[type=radio]:focus + label:active {
+        input[type=radio]:focus-visible + label:active {
           z-index: 2;
 
           outline: none;
+
           box-shadow: var(---shadow-8);
         }
       `];
@@ -12479,11 +12432,13 @@ class CPTEquation extends ProspectableElement {
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;
@@ -22299,6 +22254,7 @@ class CPTParameters extends ProspectableElement {
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 
@@ -22592,9 +22548,9 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .curve.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve.interactive:hover {
@@ -22612,7 +22568,7 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .curve.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -22621,9 +22577,9 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -22645,7 +22601,7 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -22679,8 +22635,8 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve {
@@ -22713,8 +22669,8 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -22726,8 +22682,8 @@ class CPTProbability extends DecidablesMixinResizeable(ProspectableElement) {
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
@@ -25735,6 +25691,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25758,6 +25715,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -25798,6 +25756,7 @@ class CPTSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -26671,9 +26630,9 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
         .curve-p.interactive,
         .curve-n.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve-p.interactive:hover,
@@ -26693,8 +26652,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve-p.interactive:focus,
-        :host(.keyboard) .curve-n.interactive:focus {
+        .curve-p.interactive:focus-visible,
+        .curve-n.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -26703,9 +26662,9 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -26727,7 +26686,7 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -26767,8 +26726,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve-p,
@@ -26802,8 +26761,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -26815,8 +26774,8 @@ class CPTValue extends DecidablesMixinResizeable(ProspectableElement) {
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
@@ -27832,6 +27791,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27855,6 +27815,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -27895,6 +27856,7 @@ class DecisionSpace extends DecidablesMixinResizeable(ProspectableElement) {
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -28894,6 +28856,7 @@ class ProspectableResponse extends ProspectableElement {
 
           width: 5.25rem;
           height: 3.5rem;
+
           padding: 0.375rem 0.75rem;
           margin: 0.25rem;
 
@@ -28921,6 +28884,7 @@ class ProspectableResponse extends ProspectableElement {
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 
@@ -28985,6 +28949,8 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
           --decidables-spinner-input-width: 4rem;
           --decidables-spinner-prefix: "$";
 
+          position: relative;
+
           display: inline-block;
 
           width: 10rem;
@@ -28994,6 +28960,7 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -29010,9 +28977,9 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
 
         .arc.interactive {
           cursor: ns-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .arc.interactive:hover {
@@ -29023,7 +28990,7 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .arc.interactive:focus {
+        .arc.interactive:focus-visible {
           filter: url("#shadow-8");
         }
 
@@ -29042,23 +29009,20 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
         .label.static {
           font-size: 1.75rem;
 
+          dominant-baseline: middle;
+
           user-select: none;
 
-          dominant-baseline: middle;
           text-anchor: middle;
         }
 
         .label.interactive {
+          position: absolute;
+
           width: var(--decidables-spinner-input-width);
           height: calc(var(--decidables-spinner-font-size) * 1.5);
-          overflow: visible;
-        }
 
-        /* HACK: Get Safari to work with SVG foreignObject */
-        /* https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari */
-        /* https://bugs.webkit.org/show_bug.cgi?id=23113 */
-        .label.interactive decidables-spinner {
-          position: fixed;
+          overflow: visible;
         }
 
         .label.interactive.win decidables-spinner {
@@ -29257,11 +29221,11 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
     // Labels
     //  DATA-JOIN
     const labelStaticUpdate = pieMerge.selectAll('.label.static').data(arcsStatic);
-    const labelInteractiveUpdate = pieMerge.selectAll('.label.interactive').data(arcsInteractive);
+    const labelInteractiveUpdate = select(this.renderRoot).selectAll('.label.interactive').data(arcsInteractive);
     //  ENTER
     const labelStaticEnter = labelStaticUpdate.enter().append('text');
-    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('foreignObject');
-    labelInteractiveEnter.append('xhtml:decidables-spinner').on('input', (event, datum) => {
+    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('xhtml:div');
+    labelInteractiveEnter.append('decidables-spinner').on('input', (event, datum) => {
       datum.data.x = parseFloat(event.target.value);
       this.dispatchEvent(new CustomEvent('risky-outcome-change', {
         detail: {
@@ -29287,21 +29251,18 @@ class RiskyOption extends DecidablesMixinResizeable(ProspectableElement) {
     });
     const labelInteractiveMerge = labelInteractiveEnter.merge(labelInteractiveUpdate).attr('class', datum => {
       return `label interactive ${datum.data.name}`;
-    }).attr('transform', datum => {
-      // HACK: Center spinner here instead of CSS for Safari SVG foreignObject
-      // x: calc(var(--decidables-spinner-input-width) / -2);
-      // y: calc(var(--decidables-spinner-font-size) * 1.5 / -2);
+    }).attr('style', datum => {
       const inputWidth = parseFloat(this.getComputedStyleValue('--decidables-spinner-input-width'));
       const fontSize = parseFloat(this.getComputedStyleValue('--decidables-spinner-font-size'));
       const rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-      const x = inputWidth * rem / -2;
-      const y = fontSize * rem * 1.5 / -2;
+      const x = width / 2 + inputWidth * rem / -2;
+      const y = height / 2 + fontSize * rem * 1.5 / -2;
       if (arcs.length === 1) {
-        return `translate(${x}, ${y})`;
+        return `left: ${x}px; top: ${y}px;`;
       }
       const radius = Math.min(width, height) / 2 * 0.6;
       const arcLabel = arc().innerRadius(radius).outerRadius(radius);
-      return `translate(${arcLabel.centroid(datum)[0] + x}, ${arcLabel.centroid(datum)[1] + y})`;
+      return `left: ${arcLabel.centroid(datum)[0] + x}px; top: ${arcLabel.centroid(datum)[1] + y}px;`;
     });
     labelInteractiveMerge.select('decidables-spinner').attr('value', datum => {
       return `${datum.data.x.toFixed(0)}`;