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

tests/Tag.test.svelte

@@ -27,7 +27,7 @@
 
 <Tag type="high-contrast">high-contrast</Tag>
 
-<Tag filter on:click>Filterable</Tag>
+<Tag filter on:click on:close>Filterable</Tag>
 
 <Tag icon="{Add16}">Custom icon</Tag>
 

tests/Toggle.test.svelte

@@ -4,7 +4,13 @@
 
 <Toggle labelText="Push notifications" />
 
-<Toggle labelText="Push notifications" toggled />
+<Toggle
+  labelText="Push notifications"
+  toggled
+  on:toggle="{(e) => {
+    console.log(e.detail.toggled);
+  }}"
+/>
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 

tests/TooltipIcon.test.svelte

@@ -23,3 +23,10 @@
 <TooltipIcon tooltipText="Left start" direction="left" align="start">
   <Filter20 />
 </TooltipIcon>
+
+<TooltipIcon>
+  <span slot="text" style="color: red"
+    >Carbon is an open source design system by IBM.</span
+  >
+  <Carbon24 />
+</TooltipIcon>