fix(Pill): correct ShadyCSS styles

Author: Cathy Siller

src/helix-ui/elements/HXPillElement.html

@@ -1,6 +1,6 @@
-<div id="wrapper">
+<div id="hxPill">
   <slot></slot>
-  <button id="dismiss" type="button">
+  <button id="hxDismiss" type="button">
     <hx-icon type="times"></hx-icon>
   </button>
 </div>

src/helix-ui/elements/HXPillElement.js

@@ -57,6 +57,6 @@ export class HXPillElement extends HXElement {
 
     /** @private */
     get _btnDismiss () {
-        return this.shadowRoot.getElementById('dismiss');
+        return this.shadowRoot.getElementById('hxDismiss');
     }
 }

src/helix-ui/elements/HXPillElement.less

@@ -8,15 +8,15 @@ button {
   padding: 0;
 }
 
-#wrapper {
+#hxPill {
   background-color: @gray-400;
   border-radius: 1em; 
   color: @gray-900;
   padding: 0 1rem;
   white-space: nowrap;
 }
 
-#dismiss {
+#hxDismiss {
   color: @gray-600;
   display: none;
   height: 1.5em;
@@ -33,7 +33,7 @@ button {
 }
 
 :host([dismissable]) {
-  #dismiss {
+  #hxDismiss {
     display: inline-block;
   }
-}
+}