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/Tile/ClickableTile.svelte

@@ -8,26 +8,17 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  $: _class = cx(
-    '--link',
-    '--tile',
-    '--tile--clickable',
-    clicked && '--tile--is-clicked',
-    light && '--tile--light',
-    className
-  );
 </script>
 
 <a
-  class={_class}
+  class={cx('--link', '--tile', '--tile--clickable', clicked && '--tile--is-clicked', light && '--tile--light', className)}
   on:click
   on:click={() => {
     clicked = !clicked;
   }}
   on:keydown
-  on:keydown={event => {
-    if (event.key === ' ' || event.key === 'Enter') {
+  on:keydown={({ key }) => {
+    if (key === ' ' || key === 'Enter') {
       clicked = !clicked;
     }
   }}

src/components/Tile/RadioTile.svelte

@@ -19,13 +19,6 @@
   addTile({ id, value, checked });
 
   $: checked = value === $selected.value;
-  $: _class = cx(
-    '--tile',
-    '--tile--selectable',
-    checked && '--tile--is-selected',
-    light && '--tile--light',
-    className
-  );
 </script>
 
 <input
@@ -41,7 +34,7 @@
   {checked} />
 <label
   for={id}
-  class={_class}
+  class={cx('--tile', '--tile--selectable', checked && '--tile--is-selected', light && '--tile--light', className)}
   on:click
   on:mouseover
   on:mouseenter

src/components/Tile/SelectableTile.svelte

@@ -20,13 +20,6 @@
   $: if (selected) {
     dispatch('select', id);
   }
-  $: _class = cx(
-    '--tile',
-    '--tile--selectable',
-    selected && '--tile--is-selected',
-    light && '--tile--light',
-    className
-  );
 </script>
 
 <input
@@ -41,7 +34,7 @@
   {title} />
 <label
   for={id}
-  class={_class}
+  class={cx('--tile', '--tile--selectable', selected && '--tile--is-selected', light && '--tile--light', className)}
   on:click
   on:click|preventDefault={() => {
     selected = !selected;

src/components/Tile/Tile.svelte

@@ -5,10 +5,14 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--tile', light && '--tile--light', 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('--tile', light && '--tile--light', className)}
+  {style}>
   <slot />
 </div>

src/components/Tile/TileGroup.svelte

@@ -44,11 +44,9 @@
     defaultSelected = $selected;
     dispatch('select', $selected);
   }
-
-  const _class = cx('--tile-group', className);
 </script>
 
-<fieldset class={_class} {disabled} {style}>
+<fieldset class={cx('--tile-group', className)} {disabled} {style}>
   {#if legend}
     <legend>{legend}</legend>
   {/if}