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

src/DataTable/ToolbarSearch.svelte

@@ -11,6 +11,9 @@
   /** Set to `true` to keep the search bar expanded */
   export let persistent = false;
 
+  /** Set to `true` to disable the search bar */
+  export let disabled = false;
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -21,10 +24,10 @@
   export let ref = null;
 
   import { tick } from "svelte";
-  import { Search } from "../Search";
+  import Search from "../Search/Search.svelte";
 
   async function expandSearch() {
-    if (persistent || expanded) return;
+    if (disabled || persistent || expanded) return;
     expanded = true;
     await tick();
     ref.focus();
@@ -32,17 +35,19 @@
 </script>
 
 <div
-  tabindex="{expanded ? '-1' : tabindex}"
+  tabindex="{expanded || disabled ? '-1' : tabindex}"
   class:bx--toolbar-action="{true}"
   class:bx--toolbar-search-container-active="{expanded}"
   class:bx--toolbar-search-container-expandable="{!persistent}"
   class:bx--toolbar-search-container-persistent="{persistent}"
+  class:bx--toolbar-search-container-disabled="{disabled}"
   on:click="{expandSearch}"
   on:focus="{expandSearch}"
 >
   <Search
     size="sm"
     tabindex="{expanded ? tabindex : '-1'}"
+    disabled="{disabled}"
     {...$$restProps}
     bind:ref
     bind:value

src/DatePicker/DatePickerInput.svelte

@@ -35,6 +35,12 @@
   /** Specify the invalid state text */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
   /**
    * Set a name for the input element
    * @type {string}
@@ -45,7 +51,9 @@
   export let ref = null;
 
   import { getContext, onMount } from "svelte";
-  import Calendar16 from "carbon-icons-svelte/lib/Calendar16";
+  import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const {
     range,
@@ -81,7 +89,11 @@
       {labelText}
     </label>
   {/if}
-  <div class:bx--date-picker-input__wrapper="{true}">
+  <div
+    class:bx--date-picker-input__wrapper="{true}"
+    class:bx--date-picker-input__wrapper--invalid="{invalid}"
+    class:bx--date-picker-input__wrapper--warn="{warn}"
+  >
     <input
       bind:this="{ref}"
       data-invalid="{invalid || undefined}"
@@ -93,6 +105,7 @@
       pattern="{pattern}"
       disabled="{disabled}"
       class:bx--date-picker__input="{true}"
+      class:bx--date-picker__input--invalid="{invalid}"
       class="{size && `bx--date-picker__input--${size}`}"
       on:input
       on:input="{({ target }) => {
@@ -112,6 +125,18 @@
         blurInput(relatedTarget);
       }}"
     />
+    {#if !$hasCalendar}
+      {#if invalid}
+        <WarningFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--invalid"
+        />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--date-picker__icon bx--date-picker__icon--warn"
+        />
+      {/if}
+    {/if}
     {#if $hasCalendar}
       <Calendar16
         role="img"
@@ -125,4 +150,7 @@
   {#if invalid}
     <div class:bx--form-requirement="{true}">{invalidText}</div>
   {/if}
+  {#if !invalid && warn}
+    <div class:bx--form-requirement="{true}">{warnText}</div>
+  {/if}
 </div>

src/Dropdown/Dropdown.svelte

@@ -69,6 +69,9 @@
    */
   export let label = undefined;
 
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
   /**
    * Override the default translation ids
    * @type {(id: any) => string}
@@ -145,6 +148,7 @@
       for="{id}"
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
+      class:bx--visually-hidden="{hideLabel}"
     >
       {titleText}
     </label>

src/Modal/Modal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the modal
    * @type {"xs" | "sm" | "lg"}
@@ -151,6 +155,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
+  on:transitionend="{(e) => {
+    if (e.propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+  }}"
 >
   <div
     bind:this="{innerModal}"
@@ -174,7 +183,7 @@
           type="button"
           aria-label="{iconDescription}"
           title="{iconDescription}"
-          class="bx--modal-close"
+          class:bx--modal-close="{true}"
           on:click="{() => {
             open = false;
           }}"

src/Search/Search.svelte

@@ -90,6 +90,8 @@
   />
 {:else}
   <div
+    role="search"
+    aria-labelledby="{id}-search"
     class:bx--search="{true}"
     class:bx--search--light="{light}"
     class:bx--search--disabled="{disabled}"
@@ -99,7 +101,9 @@
     {...$$restProps}
   >
     <Search16 class="bx--search-magnifier" />
-    <label for="{id}" class:bx--label="{true}">{labelText}</label>
+    <label id="{id}-search" for="{id}" class:bx--label="{true}"
+      >{labelText}</label
+    >
     <!-- svelte-ignore a11y-autofocus -->
     <input
       bind:this="{ref}"

src/Tabs/Tab.svelte

@@ -20,16 +20,27 @@
   /** Obtain a reference to the anchor HTML element */
   export let ref = null;
 
-  import { getContext } from "svelte";
+  import { onMount, afterUpdate, getContext, tick } from "svelte";
 
   const { selectedTab, add, update, change } = getContext("Tabs");
 
   add({ id, label, disabled });
 
+  let didMount = false;
+
   $: selected = $selectedTab === id;
-  $: if (selected && ref) {
-    ref.focus();
-  }
+
+  onMount(() => {
+    tick().then(() => {
+      didMount = true;
+    });
+  });
+
+  afterUpdate(() => {
+    if (didMount && selected && ref) {
+      ref.focus();
+    }
+  });
 </script>
 
 <li
@@ -39,6 +50,7 @@
   class:bx--tabs__nav-item--disabled="{disabled}"
   class:bx--tabs__nav-item--selected="{selected}"
   {...$$restProps}
+  on:click|preventDefault
   on:click|preventDefault="{() => {
     if (!disabled) {
       update(id);

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

src/Toggle/Toggle.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ toggled: boolean; }} toggle
+   */
+
   /**
    * Specify the toggle size
    * @type {"default" | "sm"}
@@ -28,6 +32,12 @@
    * @type {string}
    */
   export let name = undefined;
+
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: dispatch("toggle", { toggled });
 </script>
 
 <div

src/TooltipIcon/TooltipIcon.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the tooltip text */
+  /**
+   * Specify the tooltip text.
+   * Alternatively, use the "tooltipText" slot
+   */
   export let tooltipText = "";
 
   /**
@@ -56,6 +59,8 @@
     hidden = false;
   }}"
 >
-  <span id="{id}" class:bx--assistive-text="{true}">{tooltipText}</span>
+  <span id="{id}" class:bx--assistive-text="{true}">
+    <slot name="tooltipText">{tooltipText}</slot>
+  </span>
   <slot />
 </button>