feat(switch): updates focus outline to be rounded (#7390)

**Related Issue:** #4633 

## Summary

This PR will replace the block focus outline of `calcite-switch` with a
rounded one.

Before the change:


![25C47646-4B10-45A7-94E3-3CD884D35370_4_5005_c](https://github.com/Esri/calcite-design-system/assets/88453586/02313b88-8c2e-4f51-9b45-7b9631dff59f)


After the change:


![92B6D3BC-5B7E-4041-B424-BAB2F89E3C32_4_5005_c](https://github.com/Esri/calcite-design-system/assets/88453586/4d47a41f-dd8d-43f2-8390-1b89a9120440)

Author: anveshmekala

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

@@ -52,6 +52,10 @@
   @apply focus-base w-auto;
 }
 
+.container {
+  @apply rounded-full;
+}
+
 .track {
   @apply bg-foreground-2
     border-color-2

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

@@ -35,3 +35,20 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const disabled_TestOnly = (): string => html`<calcite-switch disabled checked></calcite-switch>`;
+
+export const Focus_TestOnly = (): string =>
+  html`
+    <div style="width:300px;height:300px; padding: 20px">
+      <calcite-switch> </calcite-switch>
+    </div>
+    <script>
+      (async () => {
+        await customElements.whenDefined("calcite-switch");
+        await document.querySelector("calcite-switch").setFocus();
+      })();
+    </script>
+  `;
+
+Focus_TestOnly.parameters = {
+  chromatic: { delay: 1000 },
+};