refactor: prefer class directive over class attribute (#1318)

src/Accordion/AccordionSkeleton.svelte

@@ -44,7 +44,7 @@
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>
-      <div class="bx--accordion__content">
+      <div class:bx--accordion__content="{true}">
         <SkeletonText width="90%" />
         <SkeletonText width="80%" />
         <SkeletonText width="95%" />
@@ -52,8 +52,8 @@
     </li>
   {/if}
   {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
-    <li class="bx--accordion__item">
+    <li class:bx--accordion__item="{true}">
-      <span class="bx--accordion__heading">
+      <span class:bx--accordion__heading="{true}">
         <ChevronRight class="bx--accordion__arrow" />
         <SkeletonText class="bx--accordion__title" />
       </span>

src/DatePicker/DatePicker.svelte

@@ -247,10 +247,11 @@
     class:bx--date-picker="{true}"
     class:bx--date-picker--short="{short}"
     class:bx--date-picker--light="{light}"
-    class="{datePickerType && `bx--date-picker--${datePickerType}`}
+    class:bx--date-picker--simple="{datePickerType === 'simple'}"
-      {datePickerType === 'range' &&
+    class:bx--date-picker--single="{datePickerType === 'single'}"
-      $labelTextEmpty &&
+    class:bx--date-picker--range="{datePickerType === 'range'}"
-      'bx--date-picker--nolabel'}"
+    class:bx--date-picker--nolabel="{datePickerType === 'range' &&
+      $labelTextEmpty}"
     on:keydown="{(e) => {
       if (calendar?.isOpen && e.key === 'Escape') {
         e.stopPropagation();

src/Dropdown/Dropdown.svelte

@@ -231,7 +231,7 @@
       translateWithId="{translateWithId}"
       id="{id}"
     >
-      <span class="bx--list-box__label">
+      <span class:bx--list-box__label="{true}">
         {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
       </span>
       <ListBoxMenuIcon

src/FileUploader/FileUploaderButton.svelte

@@ -67,7 +67,11 @@
   class:bx--btn="{true}"
   class:bx--btn--sm="{true}"
   class:bx--btn--disabled="{disabled}"
-  class="{kind && `bx--btn--${kind}`}"
+  class:bx--btn--primary="{kind === 'primary'}"
+  class:bx--btn--secondary="{kind === 'secondary'}"
+  class:bx--btn--tertiary="{kind === 'tertiary'}"
+  class:bx--btn--ghost="{kind === 'ghost'}"
+  class:bx--btn--danger="{kind === 'danger'}"
   on:keydown
   on:keydown="{({ key }) => {
     if (key === ' ' || key === 'Enter') {

src/MultiSelect/MultiSelect.svelte

@@ -463,7 +463,7 @@
         />
       {/if}
       {#if !filterable}
-        <span class="bx--list-box__label">{label}</span>
+        <span class:bx--list-box__label="{true}">{label}</span>
         <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
       {/if}
     </ListBoxField>

src/NumberInput/NumberInput.svelte

@@ -168,7 +168,8 @@
     class:bx--number--light="{light}"
     class:bx--number--nolabel="{hideLabel}"
     class:bx--number--nosteppers="{hideSteppers}"
-    class="{size && `bx--number--${size}`}"
+    class:bx--number--sm="{size === 'sm'}"
+    class:bx--number--xl="{size === 'xl'}"
   >
     {#if $$slots.label || label}
       <label

src/Select/Select.svelte

@@ -119,7 +119,8 @@
             id="{id}"
             name="{name}"
             class:bx--select-input="{true}"
-            class="{size && `bx--select-input--${size}`}"
+            class:bx--select-input--sm="{size === 'sm'}"
+            class:bx--select-input--xl="{size === 'xl'}"
             on:change="{({ target }) => {
               selectedValue.set(target.value);
             }}"
@@ -163,7 +164,8 @@
           required="{required || undefined}"
           aria-invalid="{invalid || undefined}"
           class:bx--select-input="{true}"
-          class="{size && `bx--select-input--${size}`}"
+          class:bx--select-input--sm="{size === 'sm'}"
+          class:bx--select-input--xl="{size === 'xl'}"
           on:change="{({ target }) => {
             selectedValue.set(target.value);
           }}"

src/TextInput/PasswordInput.svelte

@@ -178,8 +178,9 @@
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
         class:bx--text-input--warning="{warn}"
+        class:bx--text-input--sm="{size === 'sm'}"
+        class:bx--text-input--xl="{size === 'xl'}"
         {...$$restProps}
-        class="{size && `bx--text-input--${size}`}"
         on:change
         on:input
         on:input="{({ target }) => {
@@ -199,8 +200,13 @@
         class:bx--btn--disabled="{disabled}"
         class:bx--tooltip__trigger="{true}"
         class:bx--tooltip--a11y="{true}"
-        class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
+        class:bx--tooltip--top="{tooltipPosition === 'top'}"
-        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+        class:bx--tooltip--right="{tooltipPosition === 'right'}"
+        class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
+        class:bx--tooltip--left="{tooltipPosition === 'left'}"
+        class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
+        class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
+        class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
         on:click="{() => {
           type = type === 'password' ? 'text' : 'password';
         }}"

src/TextInput/TextInput.svelte

@@ -120,7 +120,8 @@
           class:bx--visually-hidden="{hideLabel}"
           class:bx--label--disabled="{disabled}"
           class:bx--label--inline="{inline}"
-          class="{inline && !!size && `bx--label--inline--${size}`}"
+          class:bx--label--inline--sm="{size === 'sm'}"
+          class:bx--label--inline--xl="{size === 'xl'}"
         >
           <slot name="labelText">
             {labelText}
@@ -191,8 +192,9 @@
         class:bx--text-input--light="{light}"
         class:bx--text-input--invalid="{invalid}"
         class:bx--text-input--warn="{warn}"
+        class:bx--text-input--sm="{size === 'sm'}"
+        class:bx--text-input--xl="{size === 'xl'}"
         {...$$restProps}
-        class="{size && `bx--text-input--${size}`}"
         on:change="{onChange}"
         on:input="{onInput}"
         on:keydown