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/Notification/InlineNotification.svelte

@@ -18,13 +18,6 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const _class = cx(
-    '--inline-notification',
-    lowContrast && '--inline-notification--low-contrast',
-    kind && `--inline-notification--${kind}`,
-    hideCloseButton && '--inline-notification--hide-close-button',
-    className
-  );
 
   let open = true;
 
@@ -34,7 +27,15 @@
 </script>
 
 {#if open}
-  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}>
+  <div
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={cx('--inline-notification', lowContrast && '--inline-notification--low-contrast', kind && `--inline-notification--${kind}`, hideCloseButton && '--inline-notification--hide-close-button', className)}
+    {style}
+    {role}
+    {kind}>
     <div class={cx('--inline-notification__details')}>
       <NotificationIcon {notificationType} {kind} {iconDescription} />
       <NotificationTextDetails {title} {subtitle} {notificationType}>

src/components/Notification/NotificationActionButton.svelte

@@ -5,8 +5,6 @@
 
   import Button from '../Button';
   import { cx } from '../../lib';
-
-  const _class = cx('--inline-notification__action-button', className);
 </script>
 
 <Button
@@ -16,7 +14,7 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  class={_class}
+  class={cx('--inline-notification__action-button', className)}
   {style}>
   <slot />
 </Button>

src/components/Notification/NotificationButton.svelte

@@ -10,16 +10,6 @@
 
   import Close20 from 'carbon-icons-svelte/lib/Close20';
   import { cx } from '../../lib';
-
-  const _class = cx(
-    notificationType === 'toast' && '--toast-notification__close-button',
-    notificationType === 'inline' && '--inline-notification__close-button',
-    className
-  );
-  const _iconClass = cx(
-    notificationType === 'toast' && '--toast-notification__close-icon',
-    notificationType === 'inline' && '--inline-notification__close-icon'
-  );
 </script>
 
 <button
@@ -29,8 +19,11 @@
   on:mouseleave
   aria-label={iconDescription}
   title={iconDescription}
-  class={_class}
+  class={cx(notificationType === 'toast' && '--toast-notification__close-button', notificationType === 'inline' && '--inline-notification__close-button', className)}
   {style}
   {type}>
-  <svelte:component this={renderIcon} class={_iconClass} {title} />
+  <svelte:component
+    this={renderIcon}
+    class={cx(notificationType === 'toast' && '--toast-notification__close-icon', notificationType === 'inline' && '--inline-notification__close-icon')}
+    {title} />
 </button>

src/components/Notification/ToastNotification.svelte

@@ -20,12 +20,6 @@
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
-  const _class = cx(
-    '--toast-notification',
-    lowContrast && '--toast-notification--low-contrast',
-    kind && `--toast-notification--${kind}`,
-    className
-  );
 
   let open = true;
 
@@ -43,18 +37,26 @@
 </script>
 
 {#if open}
-  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {role} {kind}>
+  <div
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    class={cx('--toast-notification', lowContrast && '--toast-notification--low-contrast', kind && `--toast-notification--${kind}`, className)}
+    {style}
+    {role}
+    {kind}>
     <NotificationIcon {notificationType} {kind} {iconDescription} />
     <NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
       <slot />
     </NotificationTextDetails>
     {#if !hideCloseButton}
       <NotificationButton
-        {iconDescription}
-        {notificationType}
         on:click={() => {
           open = false;
-        }} />
+        }}
+        {iconDescription}
+        {notificationType} />
     {/if}
   </div>
 {/if}