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

@@ -4,11 +4,15 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx('--breadcrumb', '--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('--breadcrumb', '--skeleton', className)}
+  {style}>
   {#each [0, 1, 2] as item, i (item)}
     <div class={cx('--breadcrumb-item')}>
       <span class={cx('--link')}>&nbsp;</span>

src/components/Breadcrumb/Breadcrumb.svelte

@@ -5,9 +5,6 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const ariaLabel = $$props['aria-label'] || 'Breadcrumb';
-  const _class = cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash');
 </script>
 
 <nav
@@ -15,10 +12,10 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  aria-label={ariaLabel}
+  aria-label={$$props['aria-label'] || 'Breadcrumb'}
   class={className}
   {style}>
-  <ol class={_class}>
+  <ol class={cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash')}>
     <slot />
   </ol>
 </nav>

src/components/Breadcrumb/BreadcrumbItem.svelte

@@ -8,22 +8,21 @@
   import { cx } from '../../lib';
   import Link from '../Link';
 
-  const ariaCurrent = $$props['aria-current'];
-  const _class = cx(
-    '--breadcrumb-item',
-    isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current',
-    className
-  );
+  $: ariaCurrent = $$props['aria-current'];
 </script>
 
-{#if href}
-  <li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<li
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--breadcrumb-item', isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current', className)}
+  {style}>
+  {#if href}
     <Link {href} aria-current={ariaCurrent}>
       <slot />
     </Link>
-  </li>
-{:else}
-  <li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  {:else}
     <slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} />
-  </li>
-{/if}
+  {/if}
+</li>