fix(switch): prevent hover state change when disabled (#9365)

**Related Issue:** #7723

## Summary

Prevents interaction states on switch when disabled.

Author: jcfranco

packages/calcite-components/src/components/switch/resources.ts

@@ -0,0 +1,5 @@
+export const CSS = {
+  container: "container",
+  track: "track",
+  handle: "handle",
+};

packages/calcite-components/src/components/switch/switch.scss

@@ -85,7 +85,7 @@
   inset-inline: -1px theme("inset.auto");
 }
 
-:host(:hover),
+.container:hover,
 :host(:focus) {
   .handle {
     @apply border-color-brand;
@@ -101,15 +101,12 @@
     @apply border-color-brand;
     inset-inline: theme("inset.auto") -1px;
   }
-}
 
-:host([checked]:hover) {
-  .track {
-    @apply bg-brand border-color-brand-hover;
-  }
-  .handle {
-    @apply border-color-brand-hover;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+  .container:hover {
+    .handle {
+      @apply border-color-brand-hover;
+      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+    }
   }
 }
 

packages/calcite-components/src/components/switch/switch.tsx

@@ -32,6 +32,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Scale } from "../interfaces";
+import { CSS } from "./resources";
 
 @Component({
   tag: "calcite-switch",
@@ -204,13 +205,13 @@ export class Switch
           <div
             aria-checked={toAriaBoolean(this.checked)}
             aria-label={getLabelText(this)}
-            class="container"
+            class={CSS.container}
             ref={this.setSwitchEl}
             role="switch"
             tabIndex={0}
           >
-            <div class="track">
-              <div class="handle" />
+            <div class={CSS.track}>
+              <div class={CSS.handle} />
             </div>
             <HiddenFormInputSlot component={this} />
           </div>