@decidables/decidables-elements 0.5.6 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/decidables-elements",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "description": "decidables-elements: Basic UI Web Components for the decidables project",
   "keywords": [
     "web component",
@@ -37,6 +37,7 @@
     "lib"
   ],
   "scripts": {
+    "clean": "gulp clean",
     "lint": "gulp lint",
     "test": "gulp test -X \"$@\"",
     "build": "gulp build"
@@ -46,7 +47,7 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
-    "lit": "^3.3.1"
+    "lit": "^3.3.2"
   },
-  "gitHead": "8c39b095d6cc3cf6a5f49457048bebf53e7158c1"
+  "gitHead": "72981c711111354170ece1e403d497073da7be96"
 }

package/src/button.js

@@ -35,49 +35,58 @@ export default 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);
         }
       `,

package/src/decidables-element.js

@@ -16,26 +16,6 @@ export default class DecidablesElement extends LitElement {
     return getComputedStyle(this).getPropertyValue(property).trim();
   }
 
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Use focus highlighting if keyboard is used at all
-    d3.select(this.renderRoot.host)
-      .classed('keyboard', true)
-      .on('mousemove.keyboard touchstart.keyboard', (event) => {
-        const element = event.currentTarget;
-        d3.select(element.renderRoot.host)
-          .classed('keyboard', false)
-          .on('mousemove.keyboard touchstart.keyboard', null);
-      })
-      .on('keydown.keyboard', (event) => {
-        const element = event.currentTarget;
-        d3.select(element.renderRoot.host)
-          .classed('keyboard', true)
-          .on('keydown.keyboard mousemove.keyboard touchstart.keyboard', null);
-      });
-  }
-
   static get greys() {
     const grey = '#999999';
     const greys = {};
@@ -92,7 +72,7 @@ export default class DecidablesElement extends LitElement {
     /* 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;
@@ -111,15 +91,9 @@ export default class DecidablesElement extends LitElement {
     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}`;
   }

package/src/slider.js

@@ -1,6 +1,6 @@
 
 import {ifDefined} from 'lit/directives/if-defined.js'; /* eslint-disable-line import/extensions */
-import {html, css, unsafeCSS} from 'lit';
+import {css, html} from 'lit';
 
 import DecidablesElement from './decidables-element';
 
@@ -131,10 +131,6 @@ export default 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, ${unsafeCSS(this.cssBoxShadow(2, true, false))});
-          ---shadow-4-rotate: var(--shadow-4-rotate, ${unsafeCSS(this.cssBoxShadow(4, true, false))});
-          ---shadow-8-rotate: var(--shadow-8-rotate, ${unsafeCSS(this.cssBoxShadow(8, true, false))});
-
           display: flex;
 
           flex-direction: column;
@@ -149,12 +145,14 @@ export default class DecidablesSlider extends DecidablesElement {
 
         .range {
           position: relative;
+
           display: flex;
 
           flex-direction: row;
 
           width: 3.5rem;
           height: 4.75rem;
+
           margin: 0 0.25rem 0.25rem;
         }
 
@@ -166,21 +164,20 @@ export default 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 {
@@ -191,16 +188,10 @@ export default 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;
@@ -212,10 +203,9 @@ export default 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;
@@ -223,57 +213,17 @@ export default 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 {
@@ -283,112 +233,65 @@ export default 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;
@@ -401,14 +304,13 @@ export default 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: "– ";
         }
       `,
@@ -424,10 +326,10 @@ export default class DecidablesSlider extends DecidablesElement {
         <input ?disabled=${this.disabled} type="range" id="slider" min=${ifDefined(this.rangeMin)} max=${ifDefined(this.rangeMax)} step=${ifDefined(this.rangeStep)} .value=${this.rangeValue} @change=${this.rangeChanged.bind(this)} @input=${this.rangeInputted.bind(this)}>
         ${this.scale
           ? html`
-            <datalist id="ticks">
-              <option value=${ifDefined(this.rangeMax)} label=${ifDefined(this.max)}></option>
-              <option value=${ifDefined(this.rangeMin)} label=${ifDefined(this.min)}></option>
-            </datalist>
+            <div class="datalist">
+              <div class="option">${ifDefined(this.max)}</div>
+              <div class="option">${ifDefined(this.min)}</div>
+            </div>
           `
           : html``
         }

package/src/spinner.js

@@ -60,13 +60,14 @@ export default 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;
@@ -84,6 +85,7 @@ export default 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);
@@ -95,6 +97,7 @@ export default class DecidablesSpinner extends DecidablesElement {
           bottom: 1px;
 
           font-size: var(---decidables-spinner-font-size);
+
           line-height: normal;
 
           content: var(---decidables-spinner-postfix);
@@ -102,20 +105,24 @@ export default 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 {
@@ -132,20 +139,54 @@ export default 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));
 
-          /* 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;
+          }
+
+          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));
+          }
         }
       `,
     ];

package/src/switch.js

@@ -57,13 +57,16 @@ export default 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 */
         }
 
@@ -79,6 +82,7 @@ export default class DecidablesSwitch extends DecidablesElement {
           position: relative;
 
           min-width: 24px;
+
           padding: 0 0 36px;
           margin: 0.25rem 0.25rem 0;
 
@@ -90,17 +94,17 @@ export default 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 {
@@ -148,17 +152,14 @@ export default 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 */
         `,
     ];
   }