Reactive audit (#449)

* refactor(search): resolve svelte file paths

* docs(Search): add reactive example

* refactor(tag): use class name directive for tag types, resolve svelte icon path

* chore(button-skeleton): deprecate small prop

* fix(breadcrumb-item): type default slot

* refactor(breadcrumb-skeleton): omit unused index

* refactor(aspect-ratio): use class name directive

* refactor(accordion): use the class name directive, resolve svelte icon paths

* refactor(code-snippet): use class name directive, resolve svelte icon paths

* fix(code-snippet-skeleton): CodeSnippetSkeleton can only be single or multi

* refactor(content-switcher): use class name directive

* docs(content-switcher): add reactive example

* docs(content-switcher): remove unused import

* docs(toggle): add reactive example

* refactor(tooltip-definition): use class name directive

* refactor(tooltip-icon): use class name directive

* refactor(tooltip): resolve svelte icon import

* fix(select): type dispatched change event

* refactor(select): resolve svelte icon import

* feat(select-item): spread rest props, avoid $ variable name

* fix(pagination-nav): type dispatched events

* refactor(pagination): resolve svelte imports

* fix(pagination): type dispatched update event

* fix(overflow-menu): type dispatched close event

* fix(number-input): type dispatched change event

* refactor(modal): use class name directive, resolve svelte imports

* refactor(inline-loading): use class name directive, resolve svelte imports

* refactor(composed-modal): resolve svelte icon imports

* refactor(combo-box): resolve svelte imports

* fix(fluid-form): rest props should not override Form class

* refactor(progress-step): resolve svelte icon imports

src/Accordion/Accordion.svelte

@@ -43,10 +43,11 @@
 {:else}
   <ul
     class:bx--accordion="{true}"
+    class:bx--accordion--start="{align === 'start'}"
+    class:bx--accordion--end="{align === 'end'}"
+    class:bx--accordion--sm="{size === 'sm'}"
+    class:bx--accordion--xl="{size === 'xl'}"
     {...$$restProps}
-    class="bx--accordion--{align}
-      {size && `bx--accordion--${size}`}
-      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter

src/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    */
   export let title = "title";
 
@@ -15,7 +15,7 @@
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
 
   let initialDisabled = disabled;
 
@@ -38,8 +38,9 @@
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
   class:bx--accordion__item--disabled="{disabled}"
+  class:bx--accordion__item--expanding="{animation === 'expanding'}"
+  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
   {...$$restProps}
-  class="bx--accordion__item--{animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;
@@ -70,11 +71,11 @@
       class="bx--accordion__arrow"
       aria-label="{iconDescription}"
     />
-    <div class="bx--accordion__title">
+    <div class:bx--accordion__title="{true}">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class="bx--accordion__content">
+  <div class:bx--accordion__content="{true}">
     <slot />
   </div>
 </li>

src/Accordion/AccordionSkeleton.svelte

@@ -17,17 +17,18 @@
   /** Set to `false` to close the first accordion item */
   export let open = true;
 
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
-  import { SkeletonText } from "../SkeletonText";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <ul
-  class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
+  class:bx--accordion="{true}"
+  class:bx--accordion--start="{align === 'start'}"
+  class:bx--accordion--end="{align === 'end'}"
+  class:bx--accordion--sm="{size === 'sm'}"
+  class:bx--accordion--xl="{size === 'xl'}"
   {...$$restProps}
-  class="bx--accordion--{align}
-    {size && `bx--accordion--${size}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
@@ -49,7 +50,7 @@
       </div>
     </li>
   {/if}
-  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
     <li class="bx--accordion__item">
       <span class="bx--accordion__heading">
         <ChevronRight16 class="bx--accordion__arrow" />

src/AspectRatio/AspectRatio.svelte

@@ -7,9 +7,15 @@
 </script>
 
 <div
-  {...$$restProps}
   class:bx--aspect-ratio="{true}"
-  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
+  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
+  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
+  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
+  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
+  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
+  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
+  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
+  {...$$restProps}
 >
   <div class:bx--aspect-ratio--object="{true}">
     <slot />

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   */
+
   /**
    * Set the `href` to use an anchor link
    * @type {string}
@@ -8,7 +12,7 @@
   /** Set to `true` if the breadcrumb item represents the current page */
   export let isCurrentPage = false;
 
-  import { Link } from "../Link";
+  import Link from "../Link/Link.svelte";
 </script>
 
 <li

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -7,16 +7,16 @@
 </script>
 
 <div
+  class:bx--skeleton="{true}"
   class:bx--breadcrumb="{true}"
   class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
-  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: count }, (_, i) => i) as item (item)}
     <div class:bx--breadcrumb-item="{true}">
       <span class:bx--link="{true}">&nbsp;</span>
     </div>

src/Button/ButtonSkeleton.svelte

@@ -11,7 +11,10 @@
    */
   export let size = "default";
 
-  /** Set to `true` to use the small variant */
+  /**
+   * @deprecated this prop will be removed in the next major release
+   * Use size="small" instead
+   */
   export let small = false;
 </script>
 

src/CodeSnippet/CodeSnippet.svelte

@@ -70,10 +70,10 @@
   export let ref = null;
 
   import { tick } from "svelte";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
-  import { Button } from "../Button";
-  import { Copy } from "../Copy";
-  import { CopyButton } from "../CopyButton";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import Button from "../Button/Button.svelte";
+  import Copy from "../Copy/Copy.svelte";
+  import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   function setShowMoreLess() {
@@ -101,12 +101,14 @@
   {#if type === 'inline'}
     {#if hideCopyButton}
       <span
-        class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
+        class:bx--snippet="{true}"
+        class:bx--snippet--expand="{expanded}"
+        class:bx--snippet--light="{light}"
+        class:bx--snippet--no-copy="{hideCopyButton}"
+        class:bx--snippet--wraptext="{wrapText}"
+        class:bx--snippet--single="{type === 'single'}"
+        class:bx--snippet--inline="{type === 'inline'}"
+        class:bx--snippet--multi="{type === 'multi'}"
         {...$$restProps}
       >
         <code id="{id}">
@@ -144,8 +146,10 @@
       class:bx--snippet--light="{light}"
       class:bx--snippet--no-copy="{hideCopyButton}"
       class:bx--snippet--wraptext="{wrapText}"
+      class:bx--snippet--single="{type === 'single'}"
+      class:bx--snippet--inline="{type === 'inline'}"
+      class:bx--snippet--multi="{type === 'multi'}"
       {...$$restProps}
-      class="{type && `bx--snippet--${type}`} {$$restProps.class}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -153,8 +157,8 @@
       <div
         role="{type === 'single' ? 'textbox' : undefined}"
         tabindex="{type === 'single' ? '0' : undefined}"
-        class:bx--snippet-container="{true}"
         aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
+        class:bx--snippet-container="{true}"
       >
         <code>
           <pre bind:this="{ref}">

src/CodeSnippet/CodeSnippetSkeleton.svelte

@@ -1,14 +1,14 @@
 <script>
   /**
    * Set the type of code snippet
-   * @type {"single" | "inline" | "multi"}
+   * @type {"single" | "multi"}
    */
   export let type = "single";
 </script>
 
 <div
-  class:bx--snippet="{true}"
   class:bx--skeleton="{true}"
+  class:bx--snippet="{true}"
   class:bx--snippet--single="{type === 'single'}"
   class:bx--snippet--multi="{type === 'multi'}"
   {...$$restProps}

src/ComboBox/ComboBox.svelte

@@ -83,15 +83,13 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import {
-    ListBox,
-    ListBoxField,
-    ListBoxMenu,
-    ListBoxMenuIcon,
-    ListBoxMenuItem,
-    ListBoxSelection,
-  } from "../ListBox";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import ListBox from "../ListBox/ListBox.svelte";
+  import ListBoxField from "../ListBox/ListBoxField.svelte";
+  import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
+  import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
+  import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
+  import ListBoxSelection from "../ListBox/ListBoxSelection.svelte";
 
   const dispatch = createEventDispatcher();
 

src/ComposedModal/ComposedModal.svelte

@@ -54,15 +54,13 @@
   });
 
   function focus(element) {
-    if (selectorPrimaryFocus == null) {
-      return;
-    }
+    if (selectorPrimaryFocus == null) return;
     const node =
       (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
     if (node != null) node.focus();
   }
 
-  $: opened = false;
+  let opened = false;
   $: didOpen = open;
 
   onMount(async () => {
@@ -116,7 +114,10 @@
   <div
     bind:this="{innerModal}"
     class:bx--modal-container="{true}"
-    class="{size && `bx--modal-container--${size}`} {containerClass}"
+    class:bx--modal-container--xs="{size === 'xs'}"
+    class:bx--modal-container--sm="{size === 'sm'}"
+    class:bx--modal-container--lg="{size === 'lg'}"
+    class="{containerClass}"
     on:click="{() => {
       didClickInnerModal = true;
     }}"

src/ComposedModal/ModalFooter.svelte

@@ -24,7 +24,7 @@
   export let danger = false;
 
   import { getContext } from "svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const { closeModal, submit } = getContext("ComposedModal");
 </script>

src/ComposedModal/ModalHeader.svelte

@@ -21,7 +21,7 @@
   export let iconDescription = "Close";
 
   import { getContext } from "svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 
   const { closeModal } = getContext("ComposedModal");
 </script>

src/ContentSwitcher/ContentSwitcher.svelte

@@ -64,8 +64,9 @@
   role="tablist"
   class:bx--content-switcher="{true}"
   class:bx--content-switcher--light="{light}"
+  class:bx--content-switcher--sm="{size === 'sm'}"
+  class:bx--content-switcher--xl="{size === 'xl'}"
   {...$$restProps}
-  class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/ContentSwitcher/Switch.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the switch text
-   * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
+   * Alternatively, use the "text" slot  (e.g., <span slot="text">...</span>)
    */
   export let text = "Provide text";
 

src/FluidForm/FluidForm.svelte

@@ -1,12 +1,10 @@
 <script>
   import { setContext } from "svelte";
-  import { Form } from "../Form";
+  import Form from "../Form/Form.svelte";
 
-  setContext("Form", {
-    isFluid: true,
-  });
+  setContext("Form", { isFluid: true });
 </script>
 
-<Form class="bx--form--fluid" {...$$restProps}>
+<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}">
   <slot />
 </Form>

src/InlineLoading/InlineLoading.svelte

@@ -21,9 +21,9 @@
   export let successDelay = 1500;
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
-  import Error20 from "carbon-icons-svelte/lib/Error20";
-  import { Loading } from "../Loading";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
+  import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
+  import Loading from "../Loading/Loading.svelte";
 
   const dispatch = createEventDispatcher();
 

src/Modal/Modal.svelte

@@ -69,8 +69,8 @@
   export let ref = null;
 
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
-  import { Button } from "../Button";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -160,7 +160,9 @@
     aria-modal="true"
     aria-label="{ariaLabel}"
     class:bx--modal-container="{true}"
-    class="{size && `bx--modal-container--${size}`}"
+    class:bx--modal-container--xs="{size === 'xs'}"
+    class:bx--modal-container--sm="{size === 'sm'}"
+    class:bx--modal-container--lg="{size === 'lg'}"
     on:click="{() => {
       didClickInnerModal = true;
     }}"

src/NumberInput/NumberInput.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   * @event {number} change
    */
 
   /**
@@ -91,9 +92,9 @@
   export let ref = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
-  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
+  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",

src/OverflowMenu/OverflowMenu.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ index: number; text: string; }} close
+   */
+
   /**
    * Specify the size of the overflow menu
    * @type {"sm" | "xl"}
@@ -52,7 +56,7 @@
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
-  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
+  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
   import { formatStyle } from "./formatStyle";
 
   const dispatch = createEventDispatcher();

src/Pagination/Pagination.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ pageSize: number; page: number; }} update
+   */
+
   /** Specify the current page index */
   export let page = 1;
 
@@ -65,10 +69,11 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { createEventDispatcher } from "svelte";
-  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
-  import { Button } from "../Button";
-  import { Select, SelectItem } from "../Select";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
+  import Button from "../Button/Button.svelte";
+  import Select from "../Select/Select.svelte";
+  import SelectItem from "../Select/SelectItem.svelte";
 
   const dispatch = createEventDispatcher();
 

src/Pagination/PaginationSkeleton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { SkeletonText } from "../SkeletonText";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <div

src/PaginationNav/PaginationNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {{ page: number; }} change
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
+   */
+
   /** Specify the current page index */
   export let page = 0;
 
@@ -18,11 +24,11 @@
   export let backwardText = "Previous page";
 
   import { afterUpdate, createEventDispatcher } from "svelte";
-  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
   import PaginationOverflow from "./PaginationOverflow.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
   const MIN = 4;

src/PaginationNav/PaginationOverflow.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ index: number; }} select
+   */
+
   /** Specify the pivot start index */
   export let fromIndex = 0;
 
@@ -6,7 +10,7 @@
   export let count = 0;
 
   import { createEventDispatcher } from "svelte";
-  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16";
+  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
 
   const dispatch = createEventDispatcher();

src/ProgressIndicator/ProgressStep.svelte

@@ -24,8 +24,8 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { onMount, getContext } from "svelte";
-  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
-  import Warning16 from "carbon-icons-svelte/lib/Warning16";
+  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16/CheckmarkOutline16.svelte";
+  import Warning16 from "carbon-icons-svelte/lib/Warning16/Warning16.svelte";
 
   let step = {};
 

src/Search/Search.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * @deprecated this prop will be removed in the next major release
-   * Set to `true` to use the small variant
+   * Use size="sm" instead
    * @type {boolean} [small=false]
    */
   export let small = false;
@@ -70,9 +70,9 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import Close16 from "carbon-icons-svelte/lib/Close16";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
-  import Search16 from "carbon-icons-svelte/lib/Search16";
+  import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Search16 from "carbon-icons-svelte/lib/Search16/Search16.svelte";
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();

src/Select/Select.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {string} change
+   */
+
   /**
    * Specify the selected item value
    * @type {string}
@@ -52,8 +56,8 @@
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);

src/Select/SelectItem.svelte

@@ -17,8 +17,8 @@
 
   let selected = false;
 
-  const unsubscribe = ctx.selectedValue.subscribe(($) => {
-    selected = $ === value;
+  const unsubscribe = ctx.selectedValue.subscribe((currentValue) => {
+    selected = currentValue === value;
   });
 
   onDestroy(() => {
@@ -32,8 +32,7 @@
   hidden="{hidden}"
   selected="{selected}"
   class:bx--select-option="{true}"
-  class="{$$restProps.class}"
-  style="{$$restProps.style}"
+  {...$$restProps}
 >
   {text || value}
 </option>

src/Tag/Tag.svelte

@@ -1,11 +1,9 @@
 <script>
-  /**
-   * @restProps {div | span}
-   */
+  /** @restProps {div | span} */
 
   /**
    * Specify the type of tag
-   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
    */
   export let type = undefined;
 
@@ -24,7 +22,7 @@
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
 </script>
 
@@ -44,8 +42,17 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
-      {...$$restProps}
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--red="{type === 'red'}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -67,8 +74,17 @@
     <span
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
-      {...$$restProps}
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--red="{type === 'red'}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
       on:click
       on:mouseover
       on:mouseenter

src/Tooltip/Tooltip.svelte

@@ -64,7 +64,7 @@
   export let refIcon = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import Information16 from "carbon-icons-svelte/lib/Information16";
+  import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
 
   const dispatch = createEventDispatcher();
 

src/TooltipDefinition/TooltipDefinition.svelte

@@ -51,8 +51,11 @@
     class:bx--tooltip__trigger--definition="{true}"
     class:bx--tooltip--hidden="{!visible}"
     class:bx--tooltip--visible="{visible}"
-    class="{direction && `bx--tooltip--${direction}`}
-      {align && `bx--tooltip--align-${align}`}"
+    class:bx--tooltip--top="{direction === 'top'}"
+    class:bx--tooltip--bottom="{direction === 'bottom'}"
+    class:bx--tooltip--align-start="{align === 'start'}"
+    class:bx--tooltip--align-center="{align === 'center'}"
+    class:bx--tooltip--align-end="{align === 'end'}"
     on:click
     on:mouseover
     on:mouseenter

src/TooltipIcon/TooltipIcon.svelte

@@ -36,10 +36,14 @@
   class:bx--tooltip__trigger="{true}"
   class:bx--tooltip--a11y="{true}"
   class:bx--tooltip--hidden="{hidden}"
+  class:bx--tooltip--top="{direction === 'top'}"
+  class:bx--tooltip--right="{direction === 'right'}"
+  class:bx--tooltip--bottom="{direction === 'bottom'}"
+  class:bx--tooltip--left="{direction === 'left'}"
+  class:bx--tooltip--align-start="{align === 'start'}"
+  class:bx--tooltip--align-center="{align === 'center'}"
+  class:bx--tooltip--align-end="{align === 'end'}"
   {...$$restProps}
-  class="{direction && `bx--tooltip--${direction}`}
-    {align && `bx--tooltip--align-${align}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter