Implements Tags and Tag components

packages/bbui/src/Tags/Tag.svelte

@@ -1,11 +1,24 @@
-<div class="spectrum-Tags" role="list" aria-label="list">
+<script>
-    <div class="spectrum-Tags-item" role="listitem">
+  import Avatar from '../Avatar/Avatar.svelte'
-      <span class="spectrum-Tags-itemLabel">Tag 1</span>
+  import ClearButton from '../ClearButton/ClearButton.svelte'
-    </div>
+  export let icon = "";
-    <div class="spectrum-Tags-item is-invalid" role="listitem">
+  export let avatar = "";
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
+  export let invalid = false;
-    </div>
+  export let disabled = false;
-    <div class="spectrum-Tags-item is-disabled" role="listitem">
+  export let closable = false;
-      <span class="spectrum-Tags-itemLabel">Tag 2</span>
+</script>
-    </div>
+
-  </div>
+<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+     <ClearButton on:click />
+  {/if}
+</div>

packages/bbui/src/Tags/Tags.svelte

@@ -0,0 +1,7 @@
+<script>
+    import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+    <slot />
+</div>