fix(switch): Fix for focus outline style in certain cases (#7414)

**Related Issue:** #7402 

## Summary
Fix for focus issue where container was getting the focus outline. With
this change, the component is still taking up 100% width of the Label,
but the focus outline is limited to the visual area. We could look at
adjusting the click area in a separate update if needed.

Before:
<img width="427" alt="Screenshot 2023-08-01 at 11 54 31 AM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/5641e388-d74d-4709-80fd-4c560916edda">


After:
<img width="427" alt="Screenshot 2023-08-01 at 11 54 11 AM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/9b9b36d8-4ec3-484a-b5bd-497585471753">

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

@@ -47,13 +47,8 @@
 
 @include disabled();
 
-// focus styles
-:host {
-  @apply focus-base w-auto;
-}
-
 .container {
-  @apply rounded-full;
+  @apply outline-0;
 }
 
 .track {
@@ -67,9 +62,11 @@
     border
     border-solid
     align-top
-    transition-all
-    duration-150
-    ease-in-out;
+    focus-base;
+}
+
+:host(:focus) .track {
+  @apply focus-outset;
 }
 
 .handle {
@@ -124,9 +121,5 @@
   }
 }
 
-.container:focus {
-  @apply focus-outset;
-}
-
 @include hidden-form-input();
 @include base-component();

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

@@ -39,7 +39,7 @@ export const disabled_TestOnly = (): string => html`<calcite-switch disabled che
 export const Focus_TestOnly = (): string =>
   html`
     <div style="width:300px;height:300px; padding: 20px">
-      <calcite-switch> </calcite-switch>
+      <calcite-switch></calcite-switch>
     </div>
     <script>
       (async () => {
@@ -52,3 +52,20 @@ export const Focus_TestOnly = (): string =>
 Focus_TestOnly.parameters = {
   chromatic: { delay: 1000 },
 };
+
+export const FocusLabel_TestOnly = (): string =>
+  html`
+    <div style="width:300px;height:300px; padding: 20px">
+      <calcite-label>Switch label<calcite-switch></calcite-switch></calcite-label>
+    </div>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-switch");
+        await document.querySelector("calcite-switch").setFocus();
+      })();
+    </script>
+  `;
+
+FocusLabel_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};