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/Select/Select.Skeleton.svelte

@@ -5,11 +5,9 @@
   export let style = undefined;
 
   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}>
   {#if !hideLabel}
     <span class={cx('--label', '--skeleton')} />
   {/if}

src/components/Select/Select.svelte

@@ -21,41 +21,33 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const errorId = `error-${id}`;
-  const _class = cx(
-    '--select',
-    inline && '--select--inline',
-    light && '--select--light',
-    invalid && '--select--invalid',
-    disabled && '--select--disabled',
-    className
-  );
-  const _labelClass = cx(
-    '--label',
-    hideLabel && '--visually-hidden',
-    disabled && '--label--disabled'
-  );
-  const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
 
   let selected = writable(defaultValue);
 
   setContext('Select', { selected });
 
+  $: errorId = `error-${id}`;
   $: {
     selected.set(defaultValue);
     dispatch('change', $selected);
   }
-
   $: defaultValue = $selected;
 </script>
 
 <div class={cx('--form-item')} {style}>
-  <div class={_class}>
+  <div
+    class={cx('--select', inline && '--select--inline', light && '--select--light', invalid && '--select--invalid', disabled && '--select--disabled', className)}>
     {#if !noLabel}
-      <label for={id} class={_labelClass}>{labelText}</label>
+      <label
+        for={id}
+        class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+        {labelText}
+      </label>
     {/if}
     {#if !inline && helperText}
-      <div class={_helperTextClass}>{helperText}</div>
+      <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+        {helperText}
+      </div>
     {/if}
     {#if inline}
       <div class={cx('--select-input--inline__wrapper')}>
@@ -81,7 +73,9 @@
         {/if}
       </div>
       {#if helperText}
-        <div class={_helperTextClass}>{helperText}</div>
+        <div class={cx('--form__helper-text', disabled && '--form__helper-text--disabled')}>
+          {helperText}
+        </div>
       {/if}
     {/if}
     {#if !inline}

src/components/Select/SelectItem.svelte

@@ -11,9 +11,14 @@
   import { cx } from '../../lib';
 
   const { selected } = getContext('Select');
-  const _class = cx('--select-option', className);
 </script>
 
-<option class={_class} {value} {disabled} {hidden} {style} selected={$selected === value}>
+<option
+  selected={$selected === value}
+  class={cx('--select-option', className)}
+  {value}
+  {disabled}
+  {hidden}
+  {style}>
   {text}
 </option>

src/components/Select/SelectItemGroup.svelte

@@ -6,10 +6,8 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--select-optgroup', className);
 </script>
 
-<optgroup class={_class} {label} {disabled} {style}>
+<optgroup class={cx('--select-optgroup', className)} {label} {disabled} {style}>
   <slot />
 </optgroup>