@decidables/prospectable-elements 0.5.2 → 0.6.0

package/lib/prospectableElements.umd.js

@@ -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,49 +10805,58 @@
         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);
         }
       `];
@@ -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,14 +11146,13 @@
           font-size: 0.75rem;
         }
 
-        option {
-          padding: 0;
-
+        .option {
           line-height: 0.8;
-          min-block-size: 0;
+
+          white-space: nowrap;
         }
 
-        option::before {
+        .option::before {
           content: "– ";
         }
       `];
@@ -11266,10 +11165,10 @@
       <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>
@@ -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,20 +11307,54 @@
 
           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));
+          }
         }
       `];
     }
@@ -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,17 +11513,14 @@
           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() {
@@ -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,25 +11709,28 @@
           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);
         }
       `];
@@ -12485,11 +12438,13 @@
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;
@@ -22305,6 +22260,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 
@@ -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,8 +22688,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
@@ -25741,6 +25697,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -25764,6 +25721,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -25804,6 +25762,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -26677,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,
@@ -26699,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! */
@@ -26709,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;
@@ -26733,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! */
@@ -26773,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,
@@ -26808,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);
         }
 
@@ -26821,8 +26780,8 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `];
@@ -27838,6 +27797,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -27861,6 +27821,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -27901,6 +27862,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -28900,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;
 
@@ -28927,6 +28890,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 
@@ -28991,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;
@@ -29000,6 +28966,7 @@ ${extraStyle}`)).style("margin-left", marginLeft ? `${+marginLeft}px` : null).st
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -29016,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 {
@@ -29029,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");
         }
 
@@ -29048,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 {
@@ -29263,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: {
@@ -29293,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)}`;