@justeattakeaway/pie-switch 0.0.0-snapshot-release-20231129145325

package/README.md

@@ -0,0 +1,100 @@
+<p align="center">
+  <img align="center" src="../../../readme_image.png" height="200" alt="">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/@justeattakeaway/pie-switch">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-switch.svg">
+  </a>
+</p>
+
+# Table of Contents
+
+1. [Introduction](#pie-switch)
+2. [Installation](#installation)
+3. [Importing the component](#importing-the-component)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Props](#props)
+6. [Events](#Events)
+7. [Contributing](#contributing)
+
+## pie-switch
+
+`pie-switch` is a Web Component built using the Lit library.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+
+
+## Installation
+
+To install `pie-switch` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-switch
+
+# yarn
+$ yarn add @justeattakeaway/pie-switch
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+#### JavaScript
+```js
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
+import { PieSwitch } from '@justeattakeaway/pie-switch';
+
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-switch';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using ​@lit/react
+import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
+```
+
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-switch`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
+## Props
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| isChecked | `Boolean` | false | Indicates whether the switch is on or off |
+| isDisabled | `Boolean` | false | Indicates whether the switch is disabled or not |
+| aria  | `Object`  | `undefined`  | An object representing the aria labels `label` & `describedBy` that can be used on the switch;
+
+In your markup or JSX, you can then use these to set the properties for the `pie-switch` component:
+
+```html
+<!-- Native HTML -->
+<pie-switch></pie-switch>
+
+<!-- JSX -->
+<PieSwitch></PieSwitch>
+```
+
+## Events
+
+| Event | Payload | Description |
+| ----- |-----| ----- |
+| `pie-switch-changed` | `this.isChecked` | Custom event to indicate a switch change. The event's detail contains the value of this.isChecked.  |
+
+## Contributing
+
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.scss?inline' {
+    const content: Record<string, string>;
+    export default content;
+}

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+    describedBy?: string;
+};
+
+export declare type LabelPlacement = typeof labelPlacements[number];
+
+export declare const labelPlacements: readonly ["leading", "trailing"];
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+export declare class PieSwitch extends PieSwitch_base implements SwitchProps {
+    label?: string;
+    labelPlacement: SwitchProps['labelPlacement'];
+    aria: AriaProps;
+    isChecked: boolean;
+    isDisabled: boolean;
+    static styles: CSSResult;
+    onChange(event: Event): void;
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel;
+    render(): TemplateResult<1>;
+}
+
+declare const PieSwitch_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
+export declare interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,106 @@
+import { LitElement as w, html as n, nothing as s, unsafeCSS as b } from "lit";
+import { property as d } from "lit/decorators.js";
+import { RtlMixin as v, validPropertyValues as u, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconCheck";
+const g = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.c-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
+`, m = ["leading", "trailing"], k = "pie-switch-changed";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (h, e, c, t) => {
+  for (var i = t > 1 ? void 0 : t ? x(e, c) : e, a = h.length - 1, r; a >= 0; a--)
+    (r = h[a]) && (i = (t ? r(e, c, i) : r(i)) || i);
+  return t && i && y(e, c, i), i;
+};
+const p = "pie-switch";
+class o extends v(w) {
+  constructor() {
+    super(...arguments), this.labelPlacement = "leading", this.isChecked = !1, this.isDisabled = !1;
+  }
+  onChange(e) {
+    const { checked: c } = e == null ? void 0 : e.currentTarget;
+    this.isChecked = c;
+    const t = new CustomEvent(
+      k,
+      {
+        bubbles: !0,
+        composed: !0,
+        detail: this.isChecked
+      }
+    );
+    this.dispatchEvent(t);
+  }
+  /**
+   * Renders the label for a switch if provided.
+   * if invalid value is passed, nothing gets rendered
+   *
+   * @private
+   */
+  renderSwitchLabel() {
+    const { label: e, labelPlacement: c } = this;
+    return e ? n`
+                <label
+                    for="switch"
+                    data-test-id="switch-label-${c}">
+                    ${e}
+                </label>` : n``;
+  }
+  render() {
+    const {
+      labelPlacement: e,
+      aria: c,
+      isChecked: t,
+      isDisabled: i,
+      isRTL: a
+    } = this, r = "switch-description";
+    return n`
+            <div
+                class="c-switch-wrapper"
+                ?isRTL=${a}
+                ?isDisabled=${i}>
+                ${e === "leading" ? this.renderSwitchLabel() : s}
+                <label
+                    data-test-id="switch-component"
+                    class="c-switch"
+                    ?isChecked=${t}>
+                    <input
+                        id="switch"
+                        data-test-id="switch-input"
+                        role="switch"
+                        type="checkbox"
+                        class="c-switch-input"
+                        .checked="${t}"
+                        .disabled="${i}"
+                        @change="${this.onChange}"
+                        aria-label="${(c == null ? void 0 : c.label) || s}"
+                        aria-describedby="${c != null && c.describedBy ? r : s}">
+                    <div class="c-switch-control">
+                        ${t ? n`<icon-check></icon-check>` : s}
+                    </div>
+                </label>
+                ${c != null && c.describedBy ? n`<div id="${r}" data-test-id="${r}" class="c-switch-description">${c == null ? void 0 : c.describedBy}</div>` : s}
+                ${e === "trailing" ? this.renderSwitchLabel() : s}
+            </div>
+        `;
+  }
+}
+o.styles = b(g);
+l([
+  d({ type: String })
+], o.prototype, "label", 2);
+l([
+  d({ type: String }),
+  u(p, m, "leading")
+], o.prototype, "labelPlacement", 2);
+l([
+  d({ type: Object })
+], o.prototype, "aria", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "isChecked", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "isDisabled", 2);
+f(p, o);
+export {
+  k as ON_SWITCH_CHANGED_EVENT,
+  o as PieSwitch,
+  m as labelPlacements
+};

package/dist/react.d.ts

@@ -0,0 +1,76 @@
+import type { CSSResult } from 'lit';
+import type { EventName } from '@lit/react';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit/react';
+import type { TemplateResult } from 'lit';
+
+export declare type AriaProps = {
+    label?: string;
+    describedBy?: string;
+};
+
+export declare type LabelPlacement = typeof labelPlacements[number];
+
+export declare const labelPlacements: readonly ["leading", "trailing"];
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export declare const ON_SWITCH_CHANGED_EVENT = "pie-switch-changed";
+
+export declare const PieSwitch: ReactWebComponent<PieSwitch_2, {
+    onPieSwitchChanged: EventName<CustomEvent<any>>;
+}>;
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps {
+    label?: string;
+    labelPlacement: SwitchProps['labelPlacement'];
+    aria: AriaProps;
+    isChecked: boolean;
+    isDisabled: boolean;
+    static styles: CSSResult;
+    onChange(event: Event): void;
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel;
+    render(): TemplateResult<1>;
+}
+
+declare const PieSwitch_base: (new (...args: any[]) => {
+    isRTL: boolean;
+}) & typeof LitElement;
+
+export declare interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,23 @@
+import * as e from "react";
+import { createComponent as t } from "@lit/react";
+import { PieSwitch as i } from "./index.js";
+import { ON_SWITCH_CHANGED_EVENT as w, labelPlacements as l } from "./index.js";
+import "lit";
+import "lit/decorators.js";
+import "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconCheck";
+const s = t({
+  displayName: "PieSwitch",
+  elementClass: i,
+  react: e,
+  tagName: "pie-switch",
+  events: {
+    onPieSwitchChanged: "pie-switch-changed"
+    // when the switch checked state is changed.
+  }
+});
+export {
+  w as ON_SWITCH_CHANGED_EVENT,
+  s as PieSwitch,
+  l as labelPlacements
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@justeattakeaway/pie-switch",
+  "description": "PIE Design System Switch built using Web Components",
+  "version": "0.0.0-snapshot-release-20231129145325",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
+  "scripts": {
+    "build": "yarn build:wrapper pie-switch && run -T vite build",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "yarn lint:scripts --fix",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
+    "watch": "run -T vite build --watch",
+    "test": "echo \"Error: no test specified\" && exit 0",
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_SWITCH} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
+  },
+  "author": "Just Eat Takeaway.com - Design System Team",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@justeattakeaway/pie-components-config": "0.6.1"
+  },
+  "dependencies": {
+    "@justeattakeaway/pie-icons-webc": "0.0.0-snapshot-release-20231129145325",
+    "@justeattakeaway/pie-webc-core": "0.13.0"
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
+}

package/src/defs.ts

@@ -0,0 +1,38 @@
+export const labelPlacements = ['leading', 'trailing'] as const;
+
+export type LabelPlacement = typeof labelPlacements[number];
+
+export type AriaProps = {
+    label?: string,
+    describedBy?: string
+};
+
+export interface SwitchProps {
+    /**
+     * The ARIA labels used for the switch.
+     */
+    aria?: AriaProps;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch is on or off
+     */
+    isChecked?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether the switch disabled or not
+     */
+    isDisabled?: boolean;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The placement of the label such as leading or trailing
+     */
+    labelPlacement?: LabelPlacement;
+}
+
+/**
+ * Event name for when the switch checked state is changed.
+ *
+ * @constant
+ */
+export const ON_SWITCH_CHANGED_EVENT = 'pie-switch-changed';

package/src/index.ts

@@ -0,0 +1,125 @@
+import {
+    LitElement, html, unsafeCSS, nothing, TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { RtlMixin, validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import styles from './switch.scss?inline';
+import {
+    SwitchProps, ON_SWITCH_CHANGED_EVENT, AriaProps, labelPlacements,
+} from './defs';
+import '@justeattakeaway/pie-icons-webc/IconCheck';
+
+// Valid values available to consumers
+export * from './defs';
+
+const componentSelector = 'pie-switch';
+
+/**
+ * @tagname pie-switch
+ * @event {CustomEvent} pie-switch-changed - when the switch checked state is changed.
+ */
+
+export class PieSwitch extends RtlMixin(LitElement) implements SwitchProps {
+    @property({ type: String })
+    public label?: string;
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, labelPlacements, 'leading')
+    public labelPlacement: SwitchProps['labelPlacement'] = 'leading';
+
+    @property({ type: Object })
+    public aria!: AriaProps;
+
+    @property({ type: Boolean, reflect: true })
+    public isChecked = false;
+
+    @property({ type: Boolean, reflect: true })
+    public isDisabled = false;
+
+    static styles = unsafeCSS(styles);
+
+    onChange (event: Event) {
+        const { checked } = event?.currentTarget as HTMLInputElement;
+        this.isChecked = checked;
+        const changedEvent = new CustomEvent(
+            ON_SWITCH_CHANGED_EVENT,
+            {
+                bubbles: true,
+                composed: true,
+                detail: this.isChecked,
+            },
+        );
+        this.dispatchEvent(changedEvent);
+    }
+
+    /**
+     * Renders the label for a switch if provided.
+     * if invalid value is passed, nothing gets rendered
+     *
+     * @private
+     */
+    private renderSwitchLabel (): TemplateResult {
+        const { label, labelPlacement } = this;
+
+        if (label) {
+            return html`
+                <label
+                    for="switch"
+                    data-test-id="switch-label-${labelPlacement}">
+                    ${label}
+                </label>`;
+        }
+
+        return html``;
+    }
+
+    render () {
+        const {
+            labelPlacement,
+            aria,
+            isChecked,
+            isDisabled,
+            isRTL,
+        } = this;
+
+        const switchId = 'switch-description';
+
+        return html`
+            <div
+                class="c-switch-wrapper"
+                ?isRTL=${isRTL}
+                ?isDisabled=${isDisabled}>
+                ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
+                <label
+                    data-test-id="switch-component"
+                    class="c-switch"
+                    ?isChecked=${isChecked}>
+                    <input
+                        id="switch"
+                        data-test-id="switch-input"
+                        role="switch"
+                        type="checkbox"
+                        class="c-switch-input"
+                        .checked="${isChecked}"
+                        .disabled="${isDisabled}"
+                        @change="${this.onChange}"
+                        aria-label="${aria?.label || nothing}"
+                        aria-describedby="${aria?.describedBy ? switchId : nothing}">
+                    <div class="c-switch-control">
+                        ${isChecked ? html`<icon-check></icon-check>` : nothing}
+                    </div>
+                </label>
+                ${aria?.describedBy ? html`<div id="${switchId}" data-test-id="${switchId}" class="c-switch-description">${aria?.describedBy}</div>` : nothing}
+                ${labelPlacement === 'trailing' ? this.renderSwitchLabel() : nothing}
+            </div>
+        `;
+    }
+}
+
+defineCustomElement(componentSelector, PieSwitch);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieSwitch;
+    }
+}

package/src/switch.scss

@@ -0,0 +1,142 @@
+@use '@justeattakeaway/pie-css/scss' as p;
+
+@mixin switch-transition($property) {
+    @media (prefers-reduced-motion: no-preference) {
+        transition: $property 0.15s cubic-bezier(0.4, 0, 0.9, 1) 0s;
+    }
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+    cursor: inherit;
+}
+
+.c-switch-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--dt-spacing-b);
+    font-family: var(--dt-font-body-l-family);
+    cursor: pointer;
+
+    &[isDisabled] {
+        cursor: not-allowed;
+    }
+}
+
+.c-switch {
+    --switch-bg-color: var(--dt-color-interactive-form);
+    --switch-bg-color--checked: var(--dt-color-interactive-brand);
+    --switch-bg-color--disabled: var(--dt-color-disabled-01);
+    --switch-width: 48px;
+    --switch-height: 24px;
+    --switch-control-size: 20px;
+    --switch-padding: 2px;
+    --switch-radius: var(--dt-radius-rounded-e);
+    --switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));
+
+    position: relative;
+    display: flex;
+    width: var(--switch-width);
+    height: var(--switch-height);
+    flex-shrink: 0;
+    padding: var(--switch-padding);
+    border-radius: var(--switch-radius);
+    background-color: var(--switch-bg-color);
+
+    @include switch-transition(background-color);
+
+    &:hover {
+        background-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)));
+    }
+
+    &:focus,
+    &:focus-within {
+        @include p.focus;
+    }
+
+    &:active {
+        background-color: hsl(var(--dt-color-interactive-form-h), var(--dt-color-interactive-form-s), calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)));
+    }
+
+    &[isChecked] {
+        @include switch-transition(background-color);
+        background-color: var(--switch-bg-color--checked);
+
+        &:hover {
+            background-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
+        }
+
+        &:focus,
+        &:focus-within {
+            background-color: var(--switch-bg-color--checked);
+        }
+
+        &:active {
+            background-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
+        }
+    }
+
+    [isDisabled] & {
+        background-color: var(--switch-bg-color--disabled);
+        pointer-events: none;
+    }
+}
+
+.c-switch-input {
+    appearance: none;
+    margin: 0;
+
+    &:disabled {
+        background-color: transparent;
+    }
+}
+
+.c-switch-control {
+    position: absolute;
+    left: 2px;
+    @include switch-transition(transform);
+    width: var(--switch-control-size);
+    height: var(--switch-control-size);
+    border-radius: var(--switch-radius);
+    background-color: var(--dt-color-interactive-light);
+    padding: var(--switch-padding);
+
+    .c-switch-input:checked + & {
+        @include switch-transition(transform);
+        transform: translateX(var(--switch-translation));
+
+        .c-pieIcon--check {
+            @include switch-transition(color);
+            color: var(--switch-bg-color--checked);
+        }
+    }
+
+    .c-switch-input:disabled ~ & {
+        color: var(--switch-bg-color--disabled);
+
+        .c-pieIcon--check {
+            @include switch-transition(color);
+            color: var(--switch-bg-color--disabled);
+        }
+    }
+}
+
+// The description is only required for screen readers so we need to visually hide the description
+.c-switch-description {
+    @include p.visually-hidden;
+}
+
+.c-switch-wrapper[isRTL] {
+    .c-switch-control {
+        position: absolute;
+        left: initial;
+        right: 2px;
+    }
+
+    .c-switch-input:checked + .c-switch-control {
+        @include switch-transition(transform);
+        transform: translateX(calc(-1 * var(--switch-translation)));
+    }
+}