chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@0.82.7.
+> 164 components exported from carbon-components-svelte@0.82.7.
 
 ## Components
 
@@ -155,7 +155,6 @@
 - [`TimePickerSelect`](#timepickerselect)
 - [`ToastNotification`](#toastnotification)
 - [`Toggle`](#toggle)
-- [`ToggleSkeleton`](#toggleskeleton)
 - [`Toolbar`](#toolbar)
 - [`ToolbarBatchActions`](#toolbarbatchactions)
 - [`ToolbarContent`](#toolbarcontent)
@@ -1224,6 +1223,8 @@ None.
 | light                 | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant             |
 | tileCollapsedIconText | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
 | tileExpandedIconText  | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
+| tileExpandedLabel     | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the expanded tile           |
+| tileCollapsedLabel    | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the collapsed tile          |
 | tabindex              | No       | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                  |
 | id                    | No       | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element               |
 
@@ -4366,24 +4367,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                               | Default value                                    | Description                                     |
+| Prop name | Required | Kind             | Reactive | Type                          | Default value                                    | Description                                     |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| toggled   | No       | <code>let</code> | Yes      | <code>boolean</code>               | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
+| toggled   | No       | <code>let</code> | Yes      | <code>boolean</code>          | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size                         |
+| size      | No       | <code>let</code> | No       | <code>"md" &#124; "sm"</code> | <code>"md"</code>                                | Specify the toggle size                         |
-| disabled  | No       | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to disable checkbox input         |
+| disabled  | No       | <code>let</code> | No       | <code>boolean</code>          | <code>false</code>                               | Set to `true` to disable checkbox input         |
-| labelA    | No       | <code>let</code> | No       | <code>string</code>                | <code>"Off"</code>                               | Specify the label for the untoggled state       |
+| labelA    | No       | <code>let</code> | No       | <code>string</code>           | <code>"Off"</code>                               | Specify the label for the untoggled state       |
-| labelB    | No       | <code>let</code> | No       | <code>string</code>                | <code>"On"</code>                                | Specify the label for the toggled state         |
+| labelB    | No       | <code>let</code> | No       | <code>string</code>           | <code>"On"</code>                                | Specify the label for the toggled state         |
-| labelText | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text                          |
+| labelText | No       | <code>let</code> | No       | <code>string</code>           | <code>""</code>                                  | Specify the label text                          |
-| hideLabel | No       | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to visually hide the label text   |
+| hideLabel | No       | <code>let</code> | No       | <code>boolean</code>          | <code>false</code>                               | Set to `true` to visually hide the label text   |
-| id        | No       | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
+| id        | No       | <code>let</code> | No       | <code>string</code>           | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
-| name      | No       | <code>let</code> | No       | <code>string</code>                | <code>undefined</code>                           | Specify a name attribute for the checkbox input |
+| name      | No       | <code>let</code> | No       | <code>string</code>           | <code>undefined</code>                           | Specify a name attribute for the checkbox input |
 
 ### Slots
 
 | Slot name | Default | Props | Fallback                 |
 | :-------- | :------ | :---- | :----------------------- |
-| labelA    | No      | --    | <code>{labelA}</code>    |
-| labelB    | No      | --    | <code>{labelB}</code>    |
 | labelText | No      | --    | <code>{labelText}</code> |
 
 ### Events
@@ -4400,31 +4399,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
 | focus      | forwarded  | --                                 |
 | blur       | forwarded  | --                                 |
 
-## `ToggleSkeleton`
-
-### Props
-
-| Prop name | Required | Kind             | Reactive | Type                               | Default value                                    | Description                     |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size         |
-| labelText | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text          |
-| id        | No       | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
-
-### Slots
-
-| Slot name | Default | Props | Fallback                 |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No      | --    | <code>{labelText}</code> |
-
-### Events
-
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
-
 ## `Toolbar`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 164,
   "components": [
     {
       "moduleName": "Accordion",
@@ -13619,8 +13619,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the toggle size",
-          "type": "\"default\" | \"sm\"",
+          "type": "\"md\" | \"sm\"",
-          "value": "\"default\"",
+          "value": "\"md\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -13725,18 +13725,6 @@
       ],
       "moduleExports": [],
       "slots": [
-        {
-          "name": "labelA",
-          "default": false,
-          "fallback": "{labelA}",
-          "slot_props": "{}"
-        },
-        {
-          "name": "labelB",
-          "default": false,
-          "fallback": "{labelB}",
-          "slot_props": "{}"
-        },
         {
           "name": "labelText",
           "default": false,
@@ -13762,65 +13750,6 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
-    {
-      "moduleName": "ToggleSkeleton",
-      "filePath": "src/Toggle/ToggleSkeleton.svelte",
-      "props": [
-        {
-          "name": "size",
-          "kind": "let",
-          "description": "Specify the toggle size",
-          "type": "\"default\" | \"sm\"",
-          "value": "\"default\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "labelText",
-          "kind": "let",
-          "description": "Specify the label text",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "id",
-          "kind": "let",
-          "description": "Set an id for the input element",
-          "type": "string",
-          "value": "\"ccs-\" + Math.random().toString(36)",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        }
-      ],
-      "moduleExports": [],
-      "slots": [
-        {
-          "name": "labelText",
-          "default": false,
-          "fallback": "{labelText}",
-          "slot_props": "{}"
-        }
-      ],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
-    },
     {
       "moduleName": "Toolbar",
       "filePath": "src/DataTable/Toolbar.svelte",

docs/src/pages/components/Toggle.svx

@@ -1,9 +1,9 @@
 ---
-components: ["Toggle", "ToggleSkeleton"]
+components: ["Toggle"]
 ---
 
 <script>
-  import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
+  import { Toggle } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -33,15 +33,6 @@ Set `hideLabel` to `true` to visually hide the label text. It's recommended to s
 
 <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 />
@@ -49,11 +40,3 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
 ## Small size
 
 <Toggle size="sm" labelText="Push notifications" />
-
-## Skeleton
-
-<ToggleSkeleton />
-
-## Skeleton (small)
-
-<ToggleSkeleton size="sm" />

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__button="{true}"
-    class:bx--toggle-input--small="{size === 'sm'}"
     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
+    <div
-      class:bx--toggle__switch="{true}"
+      class:bx--toggle__appearance="{true}"
-      style:margin-top="{hideLabel ? 0 : undefined}"
+      class:bx--toggle__appearance--sm="{isSm}"
+      style="{hideLabel && 'margin-top: 0'}"
     >
-      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
+      <div
-        <slot name="labelA">
+        aria-hidden="true"
-          {labelA}
+        class:bx--toggle__switch="{true}"
-        </slot>
+        class:bx--toggle__switch--checked="{toggled}"
-      </span>
+      >
-      <span aria-hidden="true" class:bx--toggle__text--on="{true}">
+        {#if isSm}
-        <slot name="labelB">
+          <svg
-          {labelB}
+            class:bx--toggle__check="{true}"
-        </slot>
+            width="6px"
-      </span>
+            height="5px"
-    </span>
+            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";

tests/Toggle.test.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Toggle, ToggleSkeleton } from "../types";
+  import { Toggle } from "../types";
 </script>
 
 <Toggle labelText="Push notifications" hideLabel />
@@ -15,5 +15,3 @@
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
 <Toggle labelText="Push notifications" disabled />
-
-<ToggleSkeleton />

types/Toggle/Toggle.svelte.d.ts

@@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["div"];
 export interface ToggleProps extends RestProps {
   /**
    * Specify the toggle size
-   * @default "default"
+   * @default "md"
    */
-  size?: "default" | "sm";
+  size?: "md" | "sm";
 
   /**
    * Set to `true` to toggle the checkbox input
@@ -74,5 +74,5 @@ export default class Toggle extends SvelteComponentTyped<
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
   },
-  { labelA: {}; labelB: {}; labelText: {} }
+  { labelText: {} }
 > {}

types/Toggle/ToggleSkeleton.svelte.d.ts

@@ -1,37 +0,0 @@
-import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
-
-type RestProps = SvelteHTMLElements["div"];
-
-export interface ToggleSkeletonProps extends RestProps {
-  /**
-   * Specify the toggle size
-   * @default "default"
-   */
-  size?: "default" | "sm";
-
-  /**
-   * Specify the label text
-   * @default ""
-   */
-  labelText?: string;
-
-  /**
-   * Set an id for the input element
-   * @default "ccs-" + Math.random().toString(36)
-   */
-  id?: string;
-
-  [key: `data-${string}`]: any;
-}
-
-export default class ToggleSkeleton extends SvelteComponentTyped<
-  ToggleSkeletonProps,
-  {
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-  },
-  { labelText: {} }
-> {}

types/index.d.ts

@@ -137,7 +137,6 @@ export { default as TileGroup } from "./Tile/TileGroup.svelte";
 export { default as TimePicker } from "./TimePicker/TimePicker.svelte";
 export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte";
 export { default as Toggle } from "./Toggle/Toggle.svelte";
-export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton.svelte";
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
 export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";