chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

src/Toggle/Toggle.svelte

@@ -5,9 +5,9 @@
 
   /**
    * Specify the toggle size
-   * @type {"default" | "sm"}
+   * @type {"md" | "sm"}
    */
-  export let size = "default";
+  export let size = "md";
 
   /** Set to `true` to toggle the checkbox input */
   export let toggled = false;
@@ -41,6 +41,8 @@
   const dispatch = createEventDispatcher();
 
   $: dispatch("toggle", { toggled });
+  $: sideLabel = toggled ? labelB : labelA;
+  $: isSm = size === "sm";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -48,6 +50,8 @@
 <div
   class:bx--form-item="{true}"
   style:user-select="none"
+  class:bx--toggle="{true}"
+  class:bx--toggle--disabled="{disabled}"
   {...$$restProps}
   on:click
   on:mouseover
@@ -58,8 +62,7 @@
   <input
     role="switch"
     type="checkbox"
-    class:bx--toggle-input="{true}"
-    class:bx--toggle-input--small="{size === 'sm'}"
+    class:bx--toggle__button="{true}"
     checked="{toggled}"
     on:change="{() => {
       toggled = !toggled;
@@ -81,27 +84,40 @@
   <label
     aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
     for="{id}"
-    class:bx--toggle-input__label="{true}"
+    class:bx--toggle__label="{true}"
   >
-    <span class:bx--visually-hidden="{hideLabel}">
+    <span
+      class:bx--toggle__label-text="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+    >
       <slot name="labelText">
         {labelText}
       </slot>
     </span>
-    <span
-      class:bx--toggle__switch="{true}"
-      style:margin-top="{hideLabel ? 0 : undefined}"
+    <div
+      class:bx--toggle__appearance="{true}"
+      class:bx--toggle__appearance--sm="{isSm}"
+      style="{hideLabel && 'margin-top: 0'}"
     >
-      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
-        <slot name="labelA">
-          {labelA}
-        </slot>
-      </span>
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
-        <slot name="labelB">
-          {labelB}
-        </slot>
-      </span>
-    </span>
+      <div
+        aria-hidden="true"
+        class:bx--toggle__switch="{true}"
+        class:bx--toggle__switch--checked="{toggled}"
+      >
+        {#if isSm}
+          <svg
+            class:bx--toggle__check="{true}"
+            width="6px"
+            height="5px"
+            viewBox="0 0 6 5"
+          >
+            <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
+          </svg>
+        {/if}
+      </div>
+      <span class:bx--toggle__text="{true}" aria-hidden="{true}"
+        >{sideLabel}</span
+      >
+    </div>
   </label>
 </div>

src/Toggle/index.js

@@ -1,2 +1 @@
 export { default as Toggle } from "./Toggle.svelte";
-export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";

src/index.js

@@ -122,7 +122,7 @@ export {
   TileGroup,
 } from "./Tile";
 export { TimePicker, TimePickerSelect } from "./TimePicker";
-export { Toggle, ToggleSkeleton } from "./Toggle";
+export { Toggle } from "./Toggle";
 export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";