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

@@ -2,21 +2,19 @@
   let className = undefined;
   export { className as class };
   export let border = false;
-  export let rowCount = 5;
+  export let rows = 5;
   export let style = undefined;
 
   import { cx, fillArray } from '../../lib';
-
-  const _class = cx(
-    '--skeleton',
-    '--structured-list',
-    border && '--structured-list--border',
-    className
-  );
-  const rows = fillArray(rowCount - 1);
 </script>
 
-<section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+<section
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--skeleton', '--structured-list', border && '--structured-list--border', className)}
+  {style}>
   <div class={cx('--structured-list-thead')}>
     <div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
       <div class={cx('--structured-list-th')}>
@@ -31,7 +29,7 @@
     </div>
   </div>
   <div class={cx('--structured-list-tbody')}>
-    {#each rows as row, i (row)}
+    {#each fillArray(rows) as row, i (row)}
       <div class={cx('--structured-list-row')}>
         <div class={cx('--structured-list-td')} />
         <div class={cx('--structured-list-td')} />

src/components/StructuredList/StructuredListBody.svelte

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

src/components/StructuredList/StructuredListCell.svelte

@@ -6,15 +6,14 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx(
-    head && '--structured-list-th',
-    !head && '--structured-list-td',
-    noWrap && '--structured-list-content--nowrap',
-    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(head && '--structured-list-th', !head && '--structured-list-td', noWrap && '--structured-list-content--nowrap', className)}
+  {style}>
   <slot />
 </div>

src/components/StructuredList/StructuredListHead.svelte

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

src/components/StructuredList/StructuredListInput.svelte

@@ -11,8 +11,6 @@
   import { getContext } from 'svelte';
   import { cx } from '../../lib';
 
-  const _class = cx('--structured-list-input', className);
-
   const { selected, update } = getContext('StructuredListWrapper');
 
   if (checked) {
@@ -25,7 +23,7 @@
 <input
   type="radio"
   tabindex="-1"
-  class={_class}
+  class={cx('--structured-list-input', className)}
   on:change={() => {
     update(value);
   }}

src/components/StructuredList/StructuredListRow.svelte

@@ -7,12 +7,6 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
-
-  const _class = cx(
-    '--structured-list-row',
-    head && '--structured-list-row--header-row',
-    className
-  );
 </script>
 
 {#if label}
@@ -23,14 +17,20 @@
     on:mouseenter
     on:mouseleave
     on:keydown
-    class={_class}
+    class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
     for={$$props.for}
     {tabindex}
     {style}>
     <slot />
   </label>
 {:else}
-  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
+  <div
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={cx('--structured-list-row', head && '--structured-list-row--header-row', className)}
+    {style}>
     <slot />
   </div>
 {/if}

src/components/StructuredList/StructuredListWrapper.svelte

@@ -11,12 +11,6 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const _class = cx(
-    '--structured-list',
-    border && '--structured-list--border',
-    selection && '--structured-list--selection',
-    className
-  );
 
   let selected = writable(defaultSelected);
 
@@ -38,7 +32,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class={_class}
+  class={cx('--structured-list', border && '--structured-list--border', selection && '--structured-list--selection', className)}
   aria-label={$$props['aria-label'] || 'Structured list section'}
   {style}>
   <slot />