Alignment with Carbon version 10.28 (#505)

* chore(deps-dev): remove @carbon/themes

* chore(deps-dev): bump devDependencies

* fix(tabs): forward click event to Tab

* feat(toggle): dispatch toggle event

* feat(tag): dispatch close event

* feat(tooltip-icon): make tooltipText slottable

* feat(dropdown): add hideLabel prop

* docs(select): add "Hidden label" example

* refactor(modal): use class directive

* feat(modal): dispatch transitionend event

* chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0

* feat(date-picker): add warn state

* feat(tag): support small size variant

* fix(search): add semantic role

* feat(toolbar-search): add disabled state

* fix(composed-modal): add aria-label prop, update header semantic tags

* chore(deps-dev): upgrade carbon-components to v10.28

* docs(overflow-menu): add light variant example

* docs(link): document OutboundLink in Component API

* chore(tooltip-icon): rename slot to "tooltipText"

* docs(component-api): wrap code blocks to minimize width

* docs(aspect-ratio): remove inline outline style

* fix(tab): do not trigger focus when mounting

* docs(tabs): add reactive example

Closes #438

src/Tag/Tag.svelte

@@ -7,6 +7,9 @@
    */
   export let type = undefined;
 
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+
   /** Set to `true` to use filterable variant */
   export let filter = false;
 
@@ -30,10 +33,15 @@
 
   import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 </script>
 
 {#if skeleton}
   <TagSkeleton
+    size="{size}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -48,6 +56,7 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"
@@ -70,6 +79,9 @@
         disabled="{disabled}"
         title="{title}"
         on:click|stopPropagation
+        on:click|stopPropagation="{() => {
+          dispatch('close');
+        }}"
         on:mouseover
         on:mouseenter
         on:mouseleave
@@ -82,6 +94,7 @@
       id="{id}"
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
+      class:bx--tag--sm="{size === 'sm'}"
       class:bx--tag--red="{type === 'red'}"
       class:bx--tag--magenta="{type === 'magenta'}"
       class:bx--tag--purple="{type === 'purple'}"

src/Tag/TagSkeleton.svelte

@@ -1,5 +1,11 @@
+<script>
+  /** @type {"sm" | "default"} */
+  export let size = "default";
+</script>
+
 <span
   class:bx--tag="{true}"
+  class:bx--tag--sm="{size === 'sm'}"
   class:bx--skeleton="{true}"
   {...$$restProps}
   on:click