feat(chips): add link chips

PiperOrigin-RevId: 516873837

chips/lib/_shared.scss

@@ -35,6 +35,7 @@
     height: 100%;
     padding: 0 16px;
     position: relative;
+    text-decoration: none;
     width: 100%;
   }
 

chips/lib/chip.ts

@@ -6,30 +6,36 @@
 
 import '../../elevation/elevation.js';
 
-import {html, LitElement} from 'lit';
+import {LitElement, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {html as staticHtml, literal} from 'lit/static-html.js';
 
 /**
  * A chip component.
  */
 export class Chip extends LitElement {
   @property({type: Boolean}) disabled = false;
   @property({type: Boolean}) elevated = false;
+  @property({type: String}) href = '';
   @property({type: String}) label = '';
+  @property({type: String}) target = '';
 
   override render() {
     const classes = {
       elevated: this.elevated,
       flat: !this.elevated,
     };
 
-    return html`
-      <button class="container ${classMap(classes)}"
-          ?disabled=${this.disabled}>
+    const button = this.href ? literal`a` : literal`button`;
+    return staticHtml`
+      <${button} class="container ${classMap(classes)}"
+          ?disabled=${this.disabled}
+          href=${this.href || nothing}
+          target=${this.href ? this.target : nothing}>
         <md-elevation shadow=${this.elevated} surface></md-elevation>
         <div class="label">${this.label}</div>
-      </button>
+      </${button}>
     `;
   }
 }