Make Toggle labels slottable (#1002)

* feat(toggle): support slottable labels

* yarn build:lib

* docs(toggle): add "Slottable labels" example

COMPONENT_INDEX.md

@@ -4426,6 +4426,8 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 | Slot name | Default | Props | Fallback                 |
 | :-------- | :------ | :---- | :----------------------- |
+| labelA    | No      | --    | <code>{labelA}</code>    |
+| labelB    | No      | --    | <code>{labelB}</code>    |
 | labelText | No      | --    | <code>{labelText}</code> |
 
 ### Events

docs/src/COMPONENT_API.json

@@ -12440,6 +12440,18 @@
         }
       ],
       "slots": [
+        {
+          "name": "labelA",
+          "default": false,
+          "fallback": "{labelA}",
+          "slot_props": "{}"
+        },
+        {
+          "name": "labelB",
+          "default": false,
+          "fallback": "{labelB}",
+          "slot_props": "{}"
+        },
         {
           "name": "labelText",
           "default": false,

docs/src/pages/components/Toggle.svx

@@ -27,6 +27,15 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
+### Slottable labels
+
+An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
+
+<Toggle labelText="Push notifications">
+  <span slot="labelA" style="color: red">No</span>
+  <span slot="labelB" style="color: green">Yes</span>
+</Toggle>
+
 ### Disabled
 
 <Toggle labelText="Push notifications" disabled />

src/Toggle/Toggle.svelte

@@ -81,10 +81,14 @@
     </slot>
     <span class:bx--toggle__switch="{true}">
       <span aria-hidden="true" class:bx--toggle__text--off="{true}">
-        {labelA}
+        <slot name="labelA">
+          {labelA}
+        </slot>
       </span>
       <span aria-hidden="true" class:bx--toggle__text--on="{true}">
-        {labelB}
+        <slot name="labelB">
+          {labelB}
+        </slot>
       </span>
     </span>
   </label>

types/Toggle/Toggle.svelte.d.ts

@@ -64,5 +64,5 @@ export default class Toggle extends SvelteComponentTyped<
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
   },
-  { labelText: {} }
+  { labelA: {}; labelB: {}; labelText: {} }
 > {}