@decidables/decidables-elements 0.1.1 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,48 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.3.1](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.3.0...@decidables/decidables-elements@0.3.1) (2022-04-07)
+
+**Note:** Version bump only for package @decidables/decidables-elements
+
+
+
+
+
+## [0.3.0](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.2.0...@decidables/decidables-elements@0.3.0) (2022-03-31)
+
+
+### Features
+
+* **decidables-elements:** add border and border-radius as core styling variables ([a719f5a](https://github.com/decidables/decidables/commit/a719f5ad191dc9bd3e3ec7f41bc1156c8902f933))
+
+
+### Bug Fixes
+
+* **all:** improve contrast for UI controls ([4a97725](https://github.com/decidables/decidables/commit/4a9772558c569bf18c92c36731c6b05f9630ac2c))
+
+
+
+## [0.2.0](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.1.1...@decidables/decidables-elements@0.2.0) (2022-03-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* **decidables-elements:** getComputedStyleValue now trims whitespace
+which gets included in CSS custom variables
+* **decidables-elements:** Remove unique ID from DecidablesElement
+
+### Bug Fixes
+
+* **decidables-elements:** getComputedStyleValue now trims whitespace ([5d58de2](https://github.com/decidables/decidables/commit/5d58de29f121bc4009d81675a9e5ae1ace3714a9))
+
+
+### Code Refactoring
+
+* **decidables-elements:** remove unique ID hack for IE11 ([6d8e721](https://github.com/decidables/decidables/commit/6d8e72119ab42a78317e7c235a50670a2aafc097))
+
+
+
 ### [0.1.1](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.1.0...@decidables/decidables-elements@0.1.1) (2022-03-21)
 
 **Note:** Version bump only for package @decidables/decidables-elements

package/lib/decidablesElements.esm.js

@@ -3403,28 +3403,8 @@ let _$6 = t => t,
 */
 
 class DecidablesElement extends s {
-  // HACK: Create a unique ID for each DecidablesElement
-  // This is needed because Edge/IE11 don't have real Shadow DOM, so IDs leak
-  // out of elements and collide if there is more than one of an element on a
-  // page. Known issue for checkbox/switches and the id/for pattern on <input>
-  // and <label>
-  static get uniqueId() {
-    DecidablesElement.ID += 1;
-    return DecidablesElement.ID;
-  }
-
-  constructor() {
-    super();
-    this.uniqueId = `decidables-${DecidablesElement.uniqueId}`;
-  }
-
   getComputedStyleValue(property) {
-    // HACK: IE11 requires use of polyfill interface to get custom property value in Javascript
-    if (window.ShadyCSS) {
-      return window.ShadyCSS.getComputedStyleValue(this, property);
-    }
-
-    return getComputedStyle(this).getPropertyValue(property);
+    return getComputedStyle(this).getPropertyValue(property).trim();
   }
 
   firstUpdated(changedProperties) {
@@ -3594,9 +3574,9 @@ class DecidablesElement extends s {
   }
 
   static get svgFilters() {
-    const shadows = DecidablesElement.shadows; // eslint-disable-line prefer-destructuring
+    const shadows = DecidablesElement.shadows;
+    /* eslint-disable-line prefer-destructuring */
 
-    const erodeRadius = 1;
     const filters = shadows.elevations.map(z => {
       return y(_t$6 || (_t$6 = _$6`
         <filter id=${0} x="-250%" y="-250%" width="600%" height="600%">
@@ -3618,8 +3598,7 @@ class DecidablesElement extends s {
           <feComposite in="opU" in2="blurU" result="shU" operator="in" />
           <feComposite in="opP" in2="blurP" result="shP" operator="in" />
           <feComposite in="opA" in2="blurA" result="shA" operator="in" />
-          <!-- HACK Edge: Using a dynamic value for erode radius stops Edge from corrupting the "radius" value! -->
-          <feMorphology in="solid" result="smaller" operator="erode" radius=${0} />
+          <feMorphology in="solid" result="smaller" operator="erode" radius="1" />
           <feComposite in="shU" in2="smaller" result="finalU" operator="out" />
           <feComposite in="shP" in2="smaller" result="finalP" operator="out" />
           <feComposite in="shA" in2="smaller" result="finalA" operator="out" />
@@ -3629,7 +3608,7 @@ class DecidablesElement extends s {
             <feMergeNode in="finalA" />
             <feMergeNode in="SourceGraphic" />
           </feMerge>
-        </filter>`), `shadow-${z}`, shadows.mapUmbra[z].y / 2, shadows.mapUmbra[z].y, shadows.mapPenumbra[z].y / 2, shadows.mapPenumbra[z].y, shadows.mapAmbient[z].y / 2, shadows.mapAmbient[z].y, shadows.mapUmbra[z].s === 0 ? y(_t2$6 || (_t2$6 = _$6``)) : y(_t3 || (_t3 = _$6`<feMorphology in="offU" result="spreadU" operator=${0} radius=${0} />`), shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapUmbra[z].s)), shadows.mapPenumbra[z].s === 0 ? y(_t4 || (_t4 = _$6``)) : y(_t5 || (_t5 = _$6`<feMorphology in="offP" result="spreadP" operator=${0} radius=${0} />`), shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapPenumbra[z].s)), shadows.mapAmbient[z].s === 0 ? y(_t6 || (_t6 = _$6``)) : y(_t7 || (_t7 = _$6`<feMorphology in="offA" result="spreadA" operator=${0} radius=${0} />`), shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapAmbient[z].s)), shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU', shadows.mapUmbra[z].b / 2, shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP', shadows.mapPenumbra[z].b / 2, shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA', shadows.mapAmbient[z].b / 2, shadows.baselineColor, shadows.opacityUmbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityPenumbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityAmbient + shadows.opacityBoost, erodeRadius);
+        </filter>`), `shadow-${z}`, shadows.mapUmbra[z].y / 2, shadows.mapUmbra[z].y, shadows.mapPenumbra[z].y / 2, shadows.mapPenumbra[z].y, shadows.mapAmbient[z].y / 2, shadows.mapAmbient[z].y, shadows.mapUmbra[z].s === 0 ? y(_t2$6 || (_t2$6 = _$6``)) : y(_t3 || (_t3 = _$6`<feMorphology in="offU" result="spreadU" operator=${0} radius=${0} />`), shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapUmbra[z].s)), shadows.mapPenumbra[z].s === 0 ? y(_t4 || (_t4 = _$6``)) : y(_t5 || (_t5 = _$6`<feMorphology in="offP" result="spreadP" operator=${0} radius=${0} />`), shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapPenumbra[z].s)), shadows.mapAmbient[z].s === 0 ? y(_t6 || (_t6 = _$6``)) : y(_t7 || (_t7 = _$6`<feMorphology in="offA" result="spreadA" operator=${0} radius=${0} />`), shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode', Math.abs(shadows.mapAmbient[z].s)), shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU', shadows.mapUmbra[z].b / 2, shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP', shadows.mapPenumbra[z].b / 2, shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA', shadows.mapAmbient[z].b / 2, shadows.baselineColor, shadows.opacityUmbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityPenumbra + shadows.opacityBoost, shadows.baselineColor, shadows.opacityAmbient + shadows.opacityBoost);
     });
     return y(_t8 || (_t8 = _$6`
       <svg class="defs">
@@ -3663,6 +3642,8 @@ class DecidablesElement extends s {
         ---font-family-base: var(--font-family-base, "Source Sans", sans-serif);
         ---font-family-math: var(--font-family-math, "Source Serif", serif);
 
+        ---border: var(--border, 1px solid var(---color-border));
+        ---border-radius: var(--border-radius, 0.25rem);
         ---transition-duration: var(--transition-duration, 500ms);
 
         font-family: var(---font-family-base);
@@ -3696,12 +3677,10 @@ class DecidablesElement extends s {
         width: 0;
         height: 0;
       }
-    `), o$3(this.cssBoxShadow(0)), o$3(this.cssBoxShadow(2)), o$3(this.cssBoxShadow(4)), o$3(this.cssBoxShadow(8)), o$3(this.greys.white), o$3(this.greys.light75), o$3(this.greys.dark75), o$3(this.greys.white), o$3(this.greys.dark25), o$3(this.greys.light75), o$3(this.greys.light50), o$3(this.greys.grey), o$3(this.greys.dark25), o$3(this.greys.dark50), o$3(this.greys.dark75));
+    `), o$3(this.cssBoxShadow(0)), o$3(this.cssBoxShadow(2)), o$3(this.cssBoxShadow(4)), o$3(this.cssBoxShadow(8)), o$3(this.greys.white), o$3(this.greys.light75), o$3(this.greys.dark75), o$3(this.greys.white), o$3(this.greys.dark25), o$3(this.greys.light75), o$3(this.greys.light50), o$3(this.greys.dark25), o$3(this.greys.grey), o$3(this.greys.dark50), o$3(this.greys.dark75));
   }
 
-} // Static property of DecidablesElement!
-
-DecidablesElement.ID = 0;
+}
 
 let _$5 = t => t,
     _t$5,
@@ -3740,7 +3719,7 @@ class DecidablesButton extends DecidablesElement {
           color: var(---color-text-inverse);
 
           border: 0;
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
           outline: none;
         }
 
@@ -4113,14 +4092,14 @@ class DecidablesSlider extends DecidablesElement {
 
   render() {
     return $(_t2$4 || (_t2$4 = _$4`
-      <label for=${0}>
+      <label for="slider">
         <slot></slot>
       </label>
       <div class="range">
-        <input type="range" id=${0} min=${0} max=${0} step=${0} .value=${0} @change=${0} @input=${0}>
+        <input type="range" id="slider" min=${0} max=${0} step=${0} .value=${0} @change=${0} @input=${0}>
       </div>
       <decidables-spinner min=${0} max=${0} step=${0} .value=${0} @input=${0}></decidables-spinner>
-    `), `${this.uniqueId}-slider`, `${this.uniqueId}-slider`, l(this.min), l(this.max), l(this.step), this.value, this.changed.bind(this), this.inputted.bind(this), l(this.min), l(this.max), l(this.step), this.value, this.inputted.bind(this));
+    `), l(this.min), l(this.max), l(this.step), this.value, this.changed.bind(this), this.inputted.bind(this), l(this.min), l(this.max), l(this.step), this.value, this.inputted.bind(this));
   }
 
 }
@@ -4430,14 +4409,14 @@ class DecidablesSwitch extends DecidablesElement {
 
   render() {
     return $(_t2$2 || (_t2$2 = _$2`
-      <input type="checkbox" id=${0} ?checked=${0} ?disabled=${0} @change=${0}>
-      <label for=${0}>
+      <input type="checkbox" id="switch" ?checked=${0} ?disabled=${0} @change=${0}>
+      <label for="switch">
         <slot name="off-label"></slot>
       </label>
-      <label for=${0}>
+      <label for="switch">
         <slot></slot>
       </label>
-    `), `${this.uniqueId}-checkbox`, this.checked, this.disabled, this.changed.bind(this), `${this.uniqueId}-checkbox`, `${this.uniqueId}-checkbox`);
+    `), this.checked, this.disabled, this.changed.bind(this));
   }
 
 }
@@ -4644,11 +4623,11 @@ class DecidablesToggleOption extends DecidablesElement {
 
   render() {
     return $(_t2 || (_t2 = _`
-      <input type="radio" id=${0} name=${0} value=${0} .checked=${0} @change=${0}>
-      <label for=${0}>
+      <input type="radio" id="toggle-option" name=${0} value=${0} .checked=${0} @change=${0}>
+      <label for="toggle-option">
         <slot></slot>
       </label>
-    `), `${this.uniqueId}-radio`, this.name, this.value, this.checked, this.changed.bind(this), `${this.uniqueId}-radio`);
+    `), this.name, this.value, this.checked, this.changed.bind(this));
   }
 
 }