@otto-de/b2b-core-components 1.9.0 → 1.10.0

package/dist/collection/components/toggle-group/toggle-group.js

@@ -1,149 +1,149 @@
 import { h, Host, } from "@stencil/core";
 export class B2BToggleGroup {
-  constructor() {
-    this.toggleAllDisabled = () => {
-      let nodes = this.getChildNodes();
-      if (this.disabled) {
-        nodes.forEach(node => {
-          node.disabled = true;
-        });
-      }
-      else {
-        nodes.forEach(node => {
-          node.disabled = false;
+    constructor() {
+        this.toggleAllDisabled = () => {
+            let nodes = this.getChildNodes();
+            if (this.disabled) {
+                nodes.forEach(node => {
+                    node.disabled = true;
+                });
+            }
+            else {
+                nodes.forEach(node => {
+                    node.disabled = false;
+                });
+            }
+        };
+        this.setFirstActiveOnInit = () => {
+            let nodes = this.getChildNodes();
+            nodes[0].checked = true;
+        };
+        this.getChildNodes = () => {
+            return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
+        };
+        this.name = undefined;
+        this.disabled = false;
+        this.currentValue = undefined;
+    }
+    handleToggleButtonChange(ev) {
+        this.currentValue = ev.detail.value;
+        this.b2bGroupChange.emit({
+            value: ev.detail.value,
         });
-      }
-    };
-    this.setFirstActiveOnInit = () => {
-      let nodes = this.getChildNodes();
-      nodes[0].checked = true;
-    };
-    this.getChildNodes = () => {
-      return Array.from(this.host.querySelectorAll(`b2b-toggle-button`));
-    };
-    this.name = undefined;
-    this.disabled = false;
-    this.currentValue = undefined;
-  }
-  handleToggleButtonChange(ev) {
-    this.currentValue = ev.detail.value;
-    this.b2bGroupChange.emit({
-      value: ev.detail.value,
-    });
-  }
-  disabledChanged() {
-    this.toggleAllDisabled();
-  }
-  componentDidLoad() {
-    const toggleButtons = this.getChildNodes();
-    const isAnySelected = toggleButtons.some(toggle => toggle.checked);
-    if (!isAnySelected) {
-      this.setFirstActiveOnInit();
     }
-    if (this.disabled) {
-      this.toggleAllDisabled();
+    disabledChanged() {
+        this.toggleAllDisabled();
     }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'b2b-toggle-group': true,
-        'b2b-toggle-group--disabled': this.disabled,
-      } }, h("fieldset", null, h("slot", null)))));
-  }
-  static get is() { return "b2b-toggle-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["toggle-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["toggle-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The toggle group name used to group them together programmatically. This is required."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the toggle group is disabled as a whole. Per default it is false."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "currentValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bGroupChange",
-        "name": "b2b-group-change",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button."
-        },
-        "complexType": {
-          "original": "ToggleButtonEventDetail",
-          "resolved": "ToggleButtonEventDetail<any>",
-          "references": {
-            "ToggleButtonEventDetail": {
-              "location": "import",
-              "path": "../../utils/interfaces/form.interface",
-              "id": "src/utils/interfaces/form.interface.d.ts::ToggleButtonEventDetail"
-            }
-          }
+    componentDidLoad() {
+        const toggleButtons = this.getChildNodes();
+        const isAnySelected = toggleButtons.some(toggle => toggle.checked);
+        if (!isAnySelected) {
+            this.setFirstActiveOnInit();
+        }
+        if (this.disabled) {
+            this.toggleAllDisabled();
         }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "disabledChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "b2b-change",
-        "method": "handleToggleButtonChange",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { key: '060b5ec1a81cae6721dec955bbe544caefc31b3b' }, h("div", { key: '19798125a66d074eb2d4e02ac46d017281674fcb', class: {
+                'b2b-toggle-group': true,
+                'b2b-toggle-group--disabled': this.disabled,
+            } }, h("fieldset", { key: '2df884ec51dc1162461cc63be63b3781d048a073' }, h("slot", { key: 'edf814302c35d6e485a796bdc5bc91f665c40a2c' })))));
+    }
+    static get is() { return "b2b-toggle-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The toggle group name used to group them together programmatically. This is required."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the toggle group is disabled as a whole. Per default it is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bGroupChange",
+                "name": "b2b-group-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button."
+                },
+                "complexType": {
+                    "original": "ToggleButtonEventDetail",
+                    "resolved": "ToggleButtonEventDetail<any>",
+                    "references": {
+                        "ToggleButtonEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/form.interface",
+                            "id": "src/utils/interfaces/form.interface.d.ts::ToggleButtonEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "b2b-change",
+                "method": "handleToggleButtonChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/toggle-group/toggle-group.stories.js

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ name, disabled, singleDisabled }) => {
-  return html `
+    return html `
     <b2b-toggle-group name="${name}" disabled="${disabled}">
       <b2b-toggle-button
         name="${name}"
@@ -24,9 +24,9 @@ const Template = ({ name, disabled, singleDisabled }) => {
   `;
 };
 const defaultArgs = {
-  name: 'toggle-group-1',
-  disabled: false,
-  singleDisabled: false,
+    name: 'toggle-group-1',
+    disabled: false,
+    singleDisabled: false,
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
@@ -39,7 +39,7 @@ story030SingleDisabled.args = Object.assign(Object.assign({}, defaultArgs), { si
 story030SingleDisabled.storyName = 'Individual Disabled';
 const toggleGroupArgs = getArgTypes('b2b-toggle-group');
 export default {
-  title: 'Components/Interaction/Toggle Button Group',
-  argTypes: toggleGroupArgs,
-  viewMode: 'docs',
+    title: 'Components/Interaction/Toggle Button Group',
+    argTypes: toggleGroupArgs,
+    viewMode: 'docs',
 };

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -0,0 +1,304 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-60);
+  --b2b-size-headline-line-height-100: var(--b2b-size-60);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-50: var(--b2b-size-30);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 500;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-250: #850012;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host .b2b-toggle {
+  display: inline-flex;
+  position: relative;
+}
+:host .b2b-toggle__icon {
+  position: absolute;
+  fill: var(--b2b-color-success-100);
+  display: inline-block;
+  left: var(--b2b-size-60);
+  top: var(--b2b-size-10);
+  width: var(--b2b-size-30);
+  height: var(--b2b-size-30);
+  z-index: 1000;
+  opacity: 0;
+}
+:host .b2b-toggle__icon--show {
+  transition: opacity 1s;
+  transition: opacity 1s ease;
+  opacity: 1;
+}
+:host .b2b-toggle__label {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--b2b-font-family-default);
+}
+:host .b2b-toggle__label--left {
+  flex-direction: row-reverse;
+}
+:host .b2b-toggle__text {
+  margin-left: var(--b2b-size-30);
+}
+:host .b2b-toggle__text--left {
+  margin-right: var(--b2b-size-30);
+  margin-left: 0;
+}
+:host .b2b-toggle__switch {
+  position: relative;
+  display: flex;
+  width: var(--b2b-size-100);
+  height: var(--b2b-size-50);
+  cursor: pointer;
+}
+:host .b2b-toggle__switch::before, :host .b2b-toggle__switch::after {
+  position: absolute;
+  content: "";
+  cursor: pointer;
+}
+:host .b2b-toggle__switch::before {
+  width: var(--b2b-size-100);
+  height: var(--b2b-size-50);
+  border-radius: var(--b2b-size-7);
+  background-color: var(--b2b-color-grey-200);
+  transition: background-color 0.3s ease;
+}
+:host .b2b-toggle__switch::after {
+  top: var(--b2b-size-5);
+  left: var(--b2b-size-5);
+  width: var(--b2b-size-40);
+  height: var(--b2b-size-40);
+  border-radius: var(--b2b-size-7);
+  background-color: var(--b2b-color-white-100);
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+}
+:host .b2b-toggle--checked .b2b-toggle__switch::before {
+  background-color: var(--b2b-color-success-100);
+}
+:host .b2b-toggle--checked .b2b-toggle__switch::after {
+  background-color: var(--b2b-color-white-100);
+  transform: translateX(var(--b2b-size-50));
+}
+:host .b2b-toggle--disabled .b2b-toggle__icon {
+  fill: #b1b1b1;
+  cursor: default;
+}
+:host .b2b-toggle--disabled .b2b-toggle__label {
+  cursor: default;
+}
+:host .b2b-toggle--disabled .b2b-toggle__switch::before, :host .b2b-toggle--disabled .b2b-toggle__switch::after {
+  cursor: default;
+}
+:host .b2b-toggle--disabled .b2b-toggle__switch::before {
+  background-color: #b1b1b1;
+}
+:host .b2b-toggle--disabled .b2b-toggle__switch::after {
+  background-color: var(--b2b-color-grey-100);
+}

package/dist/collection/components/toggle-switch/toggle-switch.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-InputList', () => {
+    it('should render toggle-switch', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="label"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const toggleSwitch = await page.find('b2b-toggle-switch');
+        expect(toggleSwitch).not.toBeNull();
+    });
+    it('should render toggle-switch with given label on left by default', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
+        expect(label.textContent).toBe('IT-test-label');
+    });
+    it('should render toggle-switch with label on right', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label-right"
+      label-position="right"
+      disabled="false"
+      state="true"></b2b-toggle-switch>
+    `);
+        const label = await page.find('b2b-toggle-switch >>> .b2b-toggle__text');
+        expect(label.textContent).toBe('IT-test-label-right');
+    });
+    it('should render disabled toggle-switch', async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <b2b-toggle-switch
+      label="IT-test-label-right"
+      label-position="right"
+      disabled="true"
+      state="true"></b2b-toggle-switch>
+    `);
+        const toggleSwitch = await page.find('b2b-toggle-switch');
+        let disabledAttribute = toggleSwitch.getAttribute('disabled');
+        expect(disabledAttribute).not.toBeNull();
+    });
+});