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/Tabs/Tab.svelte

@@ -1,5 +1,4 @@
 <script>
-  // TODO: fix space not selecting
   let className = undefined;
   export { className as class };
   export let role = 'presentation';
@@ -23,17 +22,11 @@
   $: if (selected && anchorRef) {
     anchorRef.focus();
   }
-  $: _class = cx(
-    '--tabs__nav-item',
-    disabled && '--tabs__nav-item--disabled',
-    selected && '--tabs__nav-item--selected',
-    className
-  );
 </script>
 
 <li
   tabindex="-1"
-  class={_class}
+  class={cx('--tabs__nav-item', disabled && '--tabs__nav-item--disabled', selected && '--tabs__nav-item--selected', className)}
   on:click|preventDefault={() => {
     if (!disabled) {
       update(id);
@@ -42,16 +35,15 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:keydown={event => {
-    if (disabled) {
-      return;
-    }
-    if (event.key === 'ArrowRight') {
-      change(1);
-    } else if (event.key === 'ArrowLeft') {
-      change(-1);
-    } else if (event.key === ' ' || event.key === 'Enter') {
-      update(id);
+  on:keydown={({ key }) => {
+    if (!disabled) {
+      if (key === 'ArrowRight') {
+        change(1);
+      } else if (key === 'ArrowLeft') {
+        change(-1);
+      } else if (key === ' ' || key === 'Enter') {
+        update(id);
+      }
     }
   }}
   {role}
@@ -59,10 +51,10 @@
   <a
     bind:this={anchorRef}
     role="tab"
-    class={cx('--tabs__nav-link')}
     tabindex={disabled ? '-1' : tabindex}
     aria-selected={selected}
     aria-disabled={disabled}
+    class={cx('--tabs__nav-link')}
     {href}>
     {label}
   </a>

src/components/Tabs/TabContent.svelte

@@ -6,7 +6,6 @@
   import { getContext } from 'svelte';
   import { cx } from '../../lib';
 
-  const _class = cx('--tab-content', className);
   const id = Math.random();
   const { selectedContent, addContent } = getContext('Tabs');
 
@@ -15,6 +14,6 @@
   $: selected = $selectedContent === id;
 </script>
 
-<div class={_class} aria-hidden={!selected} hidden={!selected} {style}>
+<div aria-hidden={!selected} hidden={!selected} class={cx('--tab-content', className)} {style}>
   <slot />
 </div>

src/components/Tabs/Tabs.svelte

@@ -14,7 +14,7 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const _class = cx('--tabs', type === 'container' && '--tabs--container', className);
+
   let dropdownHidden = true;
   let tabs = writable([]);
   let tabsById = derived(tabs, _ => _.reduce((a, c) => ({ ...a, [c.id]: c }), {}));
@@ -79,10 +79,9 @@
   $: if ($selectedTab) {
     dropdownHidden = true;
   }
-  $: _listClass = cx('--tabs__nav', dropdownHidden && '--tabs__nav--hidden');
 </script>
 
-<div class={_class} {style} {role}>
+<div class={cx('--tabs', type === 'container' && '--tabs--container', className)} {style} {role}>
   <div
     role="listbox"
     tabindex="0"
@@ -107,7 +106,7 @@
     </a>
     <ChevronDownGlyph aria-hidden="true" title={iconDescription} />
   </div>
-  <ul role="tablist" class={_listClass}>
+  <ul role="tablist" class={cx('--tabs__nav', dropdownHidden && '--tabs__nav--hidden')}>
     <slot />
   </ul>
 </div>

src/components/Tabs/TabsSkeleton.svelte

@@ -4,14 +4,18 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--tabs', '--skeleton', 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('--tabs', '--skeleton', className)}
+  {style}>
   <div class={cx('--tabs-trigger')}>
     <div class={cx('--tabs-trigger-text')}>&nbsp;</div>
-    <svg width="10" height="5" viewBox="0 0 10 5" fillRule="evenodd">
+    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z" />
     </svg>
   </div>