fix(tag): set restProps.class after class value

src/Tag/Tag.Story.svelte

@@ -1,9 +1,6 @@
 <script>
-  export let disabled = undefined;
-  export let filter = undefined;
   export let slot = undefined;
   export let story = undefined;
-  export let type = undefined;
 
   import Tag from "./Tag.svelte";
   import TagSkeleton from "./Tag.Skeleton.svelte";
@@ -12,7 +9,7 @@
 <div>
   {#if story === 'filter'}
     <Tag
-      {filter}
+      {...$$restProps}
       on:click={() => {
         console.log('click');
       }}>
@@ -21,6 +18,6 @@
   {:else if story === 'skeleton'}
     <TagSkeleton />
   {:else}
-    <Tag {disabled} {type} class="class">{slot}</Tag>
+    <Tag {...$$restProps} class="class">{slot}</Tag>
   {/if}
 </div>

src/Tag/Tag.stories.js

@@ -38,6 +38,15 @@ export const Filter = () => ({
   props: {
     story: "filter",
     filter: true,
+    type: select(
+      "Tag type (type)",
+      Object.keys(TYPES).reduce(
+        (items, item) => ({ ...items, [`${item} (${item})`]: item }),
+        {}
+      ),
+      "red"
+    ),
+    disabled: boolean("Disabled (disabled)", false),
     slot: text("Content ($$slot)", "This is a tag"),
   },
 });

src/Tag/Tag.svelte

@@ -11,12 +11,13 @@
 {#if filter}
   <div
     aria-label={title}
+    {id}
     class:bx--tag={true}
     class:bx--tag--disabled={disabled}
     class:bx--tag--filter={filter}
-    class="bx--tag--{type}"
+    {...$$restProps}
-    {id}
+    class="{type && `bx--tag--${type}`}
-    {...$$restProps}>
+    {$$restProps.class}">
     <slot props={{ class: 'bx--tag__label' }}>
       <span class:bx--tag__label={true}>{type}</span>
     </slot>
@@ -36,8 +37,9 @@
   <span
     class:bx--tag={true}
     class:bx--tag--disabled={disabled}
-    class="bx--tag--{type}"
     {...$$restProps}
+    class="{type && `bx--tag--${type}`}
+    {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter