Alignment with Carbon version 10.27 (#495)

* chore(deps-dev): bump devDependencies

* docs: update number of available carbon icons

* feat(notification): distinguish dispatched close event between click/timeout

* fix(notification): prevent class from being overriden by $$restProps

* docs(notification): improve example body copy

* fix(notification): remove notificationType prop

* refactor(notification): resolve svelte file in imports

* fix(notification): prevent class from being overridden by $$restProps

* feat(notification): update TS signature for dispatched close event

* docs: update contributing

* fix(loading): adjust spinner styles

* feat(tag): support custom icon variant

* feat(tile): add optional expand/collapse icon labels to ExpandableTile

* feat(code-snippet): support disabled state for single and multi-line types

* fix(code-snippet): remove impossible class directive

* fix(code-snippet): showMoreLess button size should be "field", not "small"

* fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

* fix(text-input): add missing warning field wrapper class

* feat(button): infer hasIconOnly using $$slots API

- requires Svelte version >=3.25

* docs(button): add danger tertiary, icon-only example

* feat(button): set default values for tooltip alignment, position

* docs: document dynamic theming

* fix(modal): correctly set class props #482

* fix(form): forward submit event in FluidForm #487

* feat(dropdown): support warning state

* feat(multi-select): support warning state

* fix(multi-select): prevent dropdown from opening if disabled

* feat(number-input): support warning state

* chore(deps-dev): upgrade devDependencies

* docs:  bump @carbon/themes, carbon-components

* refactor(data-table): co-locate DataTableSkeleton with DataTable

* docs: update number of pictograms

* fix(password-input): add missing "bx--btn" class to visibility toggle

* docs: increase z-index for component preview

src/Notification/InlineNotification.svelte

@@ -1,9 +1,7 @@
 <script>
   /**
-   * Set the type of notification
-   * @type {"toast" | "inline"}
+   * @event {{ timeout: boolean }} close
    */
-  export let notificationType = "inline";
 
   /**
    * Specify the kind of notification
@@ -42,14 +40,14 @@
   let open = true;
   let timeoutId = undefined;
 
-  function close() {
+  function close(closeFromTimeout) {
     open = false;
-    dispatch("close");
+    dispatch("close", { timeout: closeFromTimeout === true });
   }
 
   onMount(() => {
     if (timeout) {
-      timeoutId = setTimeout(() => close(), timeout);
+      timeoutId = setTimeout(() => close(true), timeout);
     }
 
     return () => {
@@ -65,7 +63,12 @@
     class:bx--inline-notification="{true}"
     class:bx--inline-notification--low-contrast="{lowContrast}"
     class:bx--inline-notification--hide-close-button="{hideCloseButton}"
-    class="{kind && `bx--inline-notification--${kind}`}"
+    class:bx--inline-notification--error="{kind === 'error'}"
+    class:bx--inline-notification--info="{kind === 'info'}"
+    class:bx--inline-notification--info-square="{kind === 'info-square'}"
+    class:bx--inline-notification--success="{kind === 'success'}"
+    class:bx--inline-notification--warning="{kind === 'warning'}"
+    class:bx--inline-notification--warning-alt="{kind === 'warning-alt'}"
     {...$$restProps}
     on:click
     on:mouseover
@@ -74,14 +77,14 @@
   >
     <div class:bx--inline-notification__details="{true}">
       <NotificationIcon
-        notificationType="{notificationType}"
+        notificationType="inline"
         kind="{kind}"
         iconDescription="{iconDescription}"
       />
       <NotificationTextDetails
         title="{title}"
         subtitle="{subtitle}"
-        notificationType="{notificationType}"
+        notificationType="inline"
       >
         <slot />
       </NotificationTextDetails>
@@ -90,7 +93,7 @@
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"
-        notificationType="{notificationType}"
+        notificationType="inline"
         on:click="{close}"
       />
     {/if}

src/Notification/NotificationActionButton.svelte

@@ -1,12 +1,12 @@
 <script>
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 </script>
 
 <Button
   kind="ghost"
   size="small"
-  class="bx--inline-notification__action-button"
   {...$$restProps}
+  class="bx--inline-notification__action-button {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/Notification/NotificationButton.svelte

@@ -20,7 +20,7 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Close icon";
 
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 </script>
 
 <button
@@ -38,7 +38,6 @@
   <svelte:component
     this="{renderIcon}"
     title="{title}"
-    class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
-      {notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
+    class="bx--{notificationType}-notification__close-icon"
   />
 </button>

src/Notification/NotificationIcon.svelte

@@ -14,12 +14,12 @@
   /** Specify the ARIA label for the icon */
   export let iconDescription = "Closes notification";
 
-  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
-  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20";
-  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20";
-  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20";
-  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20";
-  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20";
+  import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20/CheckmarkFilled20.svelte";
+  import ErrorFilled20 from "carbon-icons-svelte/lib/ErrorFilled20/ErrorFilled20.svelte";
+  import InformationFilled20 from "carbon-icons-svelte/lib/InformationFilled20/InformationFilled20.svelte";
+  import InformationSquareFilled20 from "carbon-icons-svelte/lib/InformationSquareFilled20/InformationSquareFilled20.svelte";
+  import WarningFilled20 from "carbon-icons-svelte/lib/WarningFilled20/WarningFilled20.svelte";
+  import WarningAltFilled20 from "carbon-icons-svelte/lib/WarningAltFilled20/WarningAltFilled20.svelte";
 
   const icons = {
     error: ErrorFilled20,

src/Notification/ToastNotification.svelte

@@ -1,9 +1,7 @@
 <script>
   /**
-   * Set the type of notification
-   * @type {"toast" | "inline"}
+   * @event {{ timeout: boolean }} close
    */
-  export let notificationType = "toast";
 
   /**
    * Specify the kind of notification
@@ -45,14 +43,14 @@
   let open = true;
   let timeoutId = undefined;
 
-  function close() {
+  function close(closeFromTimeout) {
     open = false;
-    dispatch("close");
+    dispatch("close", { timeout: closeFromTimeout === true });
   }
 
   onMount(() => {
     if (timeout) {
-      timeoutId = setTimeout(() => close(), timeout);
+      timeoutId = setTimeout(() => close(true), timeout);
     }
 
     return () => {
@@ -67,30 +65,29 @@
     kind="{kind}"
     class:bx--toast-notification="{true}"
     class:bx--toast-notification--low-contrast="{lowContrast}"
-    class="{kind && `bx--toast-notification--${kind}`}"
+    class:bx--toast-notification--error="{kind === 'error'}"
+    class:bx--toast-notification--info="{kind === 'info'}"
+    class:bx--toast-notification--info-square="{kind === 'info-square'}"
+    class:bx--toast-notification--success="{kind === 'success'}"
+    class:bx--toast-notification--warning="{kind === 'warning'}"
+    class:bx--toast-notification--warning-alt="{kind === 'warning-alt'}"
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <NotificationIcon
-      notificationType="{notificationType}"
-      kind="{kind}"
-      iconDescription="{iconDescription}"
-    />
+    <NotificationIcon kind="{kind}" iconDescription="{iconDescription}" />
     <NotificationTextDetails
       title="{title}"
       subtitle="{subtitle}"
       caption="{caption}"
-      notificationType="{notificationType}"
     >
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
         iconDescription="{iconDescription}"
-        notificationType="{notificationType}"
         on:click="{close}"
       />
     {/if}