refactor(components): convert const to reactive where appropriate

- Inline class assignments to avoid script-level clutter
- Ignore a11y-missing-attribute instead of redundant href

src/components/FileUploader/FileUploader.Skeleton.svelte

@@ -6,11 +6,9 @@
   import SkeletonText from '../SkeletonText';
   import { ButtonSkeleton } from '../Button';
   import { cx } from '../../lib';
-
-  const _class = cx('--form-item', className);
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <SkeletonText heading width="100px" />
   <SkeletonText width="225px" class={cx('--label-description')} />
   <ButtonSkeleton />

src/components/FileUploader/FileUploader.Story.svelte

@@ -48,7 +48,7 @@
         <Button
           kind="secondary"
           size="small"
-          style={'margin-top: 1rem'}
+          style="margin-top: 1rem"
           {disabled}
           on:click={() => {
             files = [];

src/components/FileUploader/FileUploader.svelte

@@ -19,9 +19,7 @@
   import FileUploaderButton from './FileUploaderButton.svelte';
 
   const dispatch = createEventDispatcher();
-  const _class = cx('--form-item', className);
 
-  // let files = [];
   let prevFiles = [];
 
   $: {
@@ -38,7 +36,7 @@
   }
 </script>
 
-<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
   <strong class={cx('--file--label')}>{labelTitle}</strong>
   <p class={cx('--label-description')}>{labelDescription}</p>
   <FileUploaderButton

src/components/FileUploader/FileUploaderButton.svelte

@@ -15,15 +15,15 @@
 
   import { cx } from '../../lib';
 
-  const _class = cx(
+  let inputRef = undefined;
+
+  $: _class = cx(
     '--btn',
     '--btn--sm',
     kind && `--btn--${kind}`,
     disabled && '--btn--disabled',
     className
   );
-
-  let inputRef = undefined;
 </script>
 
 <label

src/components/FileUploader/FileUploaderDropContainer.svelte

@@ -18,12 +18,12 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const _labelClass = cx('--file-browse-btn', disabled && '--file-browse-btn--disabled');
 
   let over = false;
   let inputRef = undefined;
 
   $: _class = cx('--file__drop-container', over && '--file__drop-container--drag-over', className);
+  $: _labelClass = cx('--file-browse-btn', disabled && '--file-browse-btn--disabled');
 </script>
 
 <div

src/components/FileUploader/FileUploaderItem.svelte

@@ -15,14 +15,14 @@
   import Filename from './Filename.svelte';
 
   const dispatch = createEventDispatcher();
-  const _class = cx(
-    '--file__selected-file',
-    invalid && '--file__selected-file--invalid',
-    className
-  );
 </script>
 
-<span on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<span
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--file__selected-file', invalid && '--file__selected-file--invalid', className)}
+  {style}>
   <p class={cx('--file-filename')}>{name}</p>
   <span class={cx('--file__state-container')}>
     <Filename