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/ComposedModal/ComposedModal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the composed modal
    * @type {"xs" | "sm" | "lg"}
@@ -34,8 +38,10 @@
     afterUpdate,
     onDestroy,
   } from "svelte";
+  import { writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
+  const label = writable(undefined);
 
   let buttonRef = null;
   let innerModal = null;
@@ -51,6 +57,9 @@
     declareRef: (ref) => {
       buttonRef = ref;
     },
+    updateLabel: (value) => {
+      label.set(value);
+    },
   });
 
   function focus(element) {
@@ -102,8 +111,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend
-  on:transitionend="{({ currentTarget }) => {
+  on:transitionend="{({ propertyName, currentTarget }) => {
+    if (propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;
@@ -112,6 +124,9 @@
 >
   <div
     bind:this="{innerModal}"
+    role="dialog"
+    aria-modal="true"
+    aria-label="{$$props['aria-label'] || $label || undefined}"
     class:bx--modal-container="{true}"
     class:bx--modal-container--xs="{size === 'xs'}"
     class:bx--modal-container--sm="{size === 'sm'}"

src/ComposedModal/ModalHeader.svelte

@@ -23,27 +23,29 @@
   import { getContext } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 
-  const { closeModal } = getContext("ComposedModal");
+  const { closeModal, updateLabel } = getContext("ComposedModal");
+
+  $: updateLabel(label);
 </script>
 
 <div class:bx--modal-header="{true}" {...$$restProps}>
   {#if label}
-    <p
+    <h2
       class:bx--modal-header__label="{true}"
       class:bx--type-delta="{true}"
       class="{labelClass}"
     >
       {label}
-    </p>
+    </h2>
   {/if}
   {#if title}
-    <p
+    <h3
       class:bx--modal-header__heading="{true}"
       class:bx--type-beta="{true}"
       class="{titleClass}"
     >
       {title}
-    </p>
+    </h3>
   {/if}
   <slot />
   <button