fix(ShadowDOM): fix broken elements

An update in #216 removed the `HXElement(tagName, template)`
constructor implementation, which broke every element that relied on
it. This commit fixes that by updating all class implementations
to the new API format, using `static get template`.

* Update visreg baselines
* Update classes to use new APIs

Author: Ryan A. Johnson

src/helix-ui/elements/HXErrorElement.html

@@ -0,0 +1,2 @@
+<hx-icon type="exclamation-circle" id="icon"></hx-icon>
+<slot></slot>

src/helix-ui/elements/HXErrorElement.js

@@ -1,21 +1,13 @@
 import { HXElement } from './HXElement';
 import shadowStyles from './HXErrorElement.less';
-
-const tagName = 'hx-error';
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>${shadowStyles}</style>
-  <hx-icon type="exclamation-circle"></hx-icon>
-  <slot></slot>
-`;
+import shadowMarkup from './HXErrorElement.html';
 
 export class HXErrorElement extends HXElement {
     static get is () {
-        return tagName;
+        return 'hx-error';
     }
 
-    constructor () {
-        super(tagName, template);
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
     }
 }//HXErrorElement

src/helix-ui/elements/HXErrorElement.less

@@ -1,2 +1,6 @@
 @import './HXElement';
 @import 'elements/hx-icon';
+
+#icon {
+  margin-right: 0.25rem;
+}

src/helix-ui/elements/HXModalElement.html

@@ -0,0 +1,6 @@
+<div id="container">
+  <button type="button" id="close">
+    <hx-icon type="times"></hx-icon>
+  </button>
+  <slot></slot>
+</div>

src/helix-ui/elements/HXModalElement.js

@@ -1,31 +1,23 @@
 import { HXElement } from './HXElement';
 import { KEYS } from '../util';
+import shadowMarkup from './HXModalElement.html';
 import shadowStyles from './HXModalElement.less';
 
-const tagName = 'hx-modal';
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>${shadowStyles}</style>
-  <div id="container">
-    <button type="button" id="close">
-      <hx-icon type="times"></hx-icon>
-    </button>
-    <slot></slot>
-  </div>
-`;
-
 export class HXModalElement extends HXElement {
     static get is () {
-        return tagName;
+        return 'hx-modal';
+    }
+
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
     }
 
     static get observedAttributes () {
         return [ 'open' ];
     }
 
     constructor () {
-        super(tagName, template);
+        super();
         this._close = this._close.bind(this);
         this._keyUp = this._keyUp.bind(this);
     }

src/helix-ui/elements/HXPopoverElement.html

@@ -0,0 +1,5 @@
+<div class="position-arrow">
+  <div id="container">
+    <slot></slot>
+  </div>
+</div>

src/helix-ui/elements/HXPopoverElement.js

@@ -1,31 +1,24 @@
 import { HXElement } from './HXElement';
 import { getPositionWithArrow } from '../util';
 import debounce from 'lodash/debounce';
+import shadowMarkup from './HXPopoverElement.html';
 import shadowStyles from './HXPopoverElement.less';
 
-const tagName = 'hx-popover';
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>${shadowStyles}</style>
-  <div class="position-arrow">
-    <div id="container">
-      <slot></slot>
-    </div>
-  </div>
-`;
-
 export class HXPopoverElement extends HXElement {
     static get is () {
-        return tagName;
+        return 'hx-popover';
+    }
+
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
     }
 
     static get observedAttributes () {
         return [ 'open' ];
     }
 
     constructor () {
-        super(tagName, template);
+        super();
         this._toggle = this._toggle.bind(this);
         this._setPosition = this._setPosition.bind(this);
         this._closeOnBackdropClick = this._closeOnBackdropClick.bind(this);

src/helix-ui/elements/HXProgressElement.html

@@ -0,0 +1 @@
+<div id="fill"></div>

src/helix-ui/elements/HXProgressElement.js

@@ -1,22 +1,10 @@
 import { HXElement } from './HXElement';
+import shadowMarkup from './HXProgressElement.html';
+import shadowStyles from './HXProgressElement.less';
 
 const MIN = 0;
 const MAX = 100;
 
-const tagName = 'hx-progress';
-const template = document.createElement('template');
-template.innerHTML = `
-    <style>
-        #fill {
-            background-color: currentColor;
-            box-sizing: border-box;
-            height: 100%;
-            width: 0%;
-        }
-    </style>
-    <div id="fill"></div>
-`;
-
 /**
  * @private
  * @param {*} val - Value to coerce into an Integer
@@ -40,11 +28,11 @@ function _parseValue (val) {
  */
 export class HXProgressElement extends HXElement {
     static get is () {
-        return tagName;
+        return 'hx-progress';
     }
 
-    constructor () {
-        super(tagName, template);
+    static get template () {
+        return `<style>${shadowStyles}</style>${shadowMarkup}`;
     }
 
     connectedCallback () {

src/helix-ui/elements/HXProgressElement.less

@@ -0,0 +1,6 @@
+#fill {
+  background-color: currentColor;
+  box-sizing: border-box;
+  height: 100%;
+  width: 0%;
+}