@six-group/ui-library 0.0.0-insider.012ddb2

package/dist/collection/components/six-spinner/test/six-spinner.spec.js

@@ -0,0 +1,37 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSpinner } from "../six-spinner";
+describe('six-spinner', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixSpinner],
+            html: `<six-spinner></six-spinner>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-spinner>
+        <mock:shadow-root>
+          <span aria-busy="true" aria-live="polite" class="spinner" part="base"></span>
+        </mock:shadow-root>
+      </six-spinner>
+    `);
+    });
+    it('renders as SIX logo when set', async () => {
+        const page = await newSpecPage({
+            components: [SixSpinner],
+            html: `<six-spinner six="true"></six-spinner>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-spinner six="true">
+        <mock:shadow-root>
+          <span aria-busy="true" aria-live="polite" class="six-spinner">
+            <div class="six-spinner__container">
+              <svg part="svg" viewBox="0 0 40 40">
+                <path d="M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" fill="none" stroke="#de3919" stroke-linecap="round" stroke-width="5"></path>
+              </svg>
+            </div>
+          </span>
+        </mock:shadow-root>
+      </six-spinner>
+    `);
+    });
+});
+//# sourceMappingURL=six-spinner.spec.js.map

package/dist/collection/components/six-spinner/test/six-spinner.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-spinner.spec.js","sourceRoot":"","sources":["../../../../src/components/six-spinner/test/six-spinner.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,wCAAwC;SAC/C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSpinner } from '../six-spinner';\n\ndescribe('six-spinner', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSpinner],\n      html: `<six-spinner></six-spinner>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-spinner>\n        <mock:shadow-root>\n          <span aria-busy=\"true\" aria-live=\"polite\" class=\"spinner\" part=\"base\"></span>\n        </mock:shadow-root>\n      </six-spinner>\n    `);\n  });\n\n  it('renders as SIX logo when set', async () => {\n    const page = await newSpecPage({\n      components: [SixSpinner],\n      html: `<six-spinner six=\"true\"></six-spinner>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-spinner six=\"true\">\n        <mock:shadow-root>\n          <span aria-busy=\"true\" aria-live=\"polite\" class=\"six-spinner\">\n            <div class=\"six-spinner__container\">\n              <svg part=\"svg\" viewBox=\"0 0 40 40\">\n                <path d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\" fill=\"none\" stroke=\"#de3919\" stroke-linecap=\"round\" stroke-width=\"5\"></path>\n              </svg>\n            </div>\n          </span>\n        </mock:shadow-root>\n      </six-spinner>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-stage-indicator/six-stage-indicator.css

@@ -0,0 +1,49 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: grid;
+}
+
+.center-content {
+  display: grid;
+  align-self: center;
+  justify-self: center;
+  grid-gap: 5px;
+  grid-auto-flow: column;
+}
+
+.align-item {
+  margin: auto;
+}
+
+.indicator, .indicator--acceptance, .indicator--etu, .indicator--dev, .indicator--itu {
+  font-family: var(--six-font-family);
+  font-size: 14px;
+  font-weight: var(--six-font-weight-bold);
+  display: grid;
+  align-content: center;
+  width: 100%;
+  height: 24px;
+}
+.indicator--itu {
+  background-color: var(--six-color-success-600);
+  color: var(--six-color-web-rock-900);
+}
+.indicator--dev {
+  background-color: var(--six-color-web-rock-900);
+  color: var(--six-color-white);
+}
+.indicator--etu {
+  background-color: var(--six-color-action-600);
+  color: var(--six-color-white);
+}
+.indicator--acceptance {
+  background-color: var(--six-color-warning-800);
+  color: var(--six-color-web-rock-900);
+}

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js

@@ -0,0 +1,50 @@
+import { h } from "@stencil/core";
+export class SixStageIndicator {
+    constructor() {
+        this.stage = null;
+    }
+    render() {
+        return this.stage == null || this.stage == 'PROD' ? null : (h("div", { class: `indicator--${this.stage.toLowerCase()}` }, h("div", { class: "center-content" }, h("six-icon", { class: "align-item", size: "small" }, "error_outline"), h("span", { class: 'align-item' }, h("slot", null)))));
+    }
+    static get is() { return "six-stage-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-stage-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-stage-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StageType",
+                    "resolved": "\"ACCEPTANCE\" | \"DEV\" | \"ETU\" | \"ITU\" | \"PROD\" | null",
+                    "references": {
+                        "StageType": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-stage-indicator/six-stage-indicator.tsx",
+                            "id": "src/components/six-stage-indicator/six-stage-indicator.tsx::StageType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The indicators value attribute"
+                },
+                "attribute": "stage",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-stage-indicator.js.map

package/dist/collection/components/six-stage-indicator/six-stage-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-stage-indicator.js","sourceRoot":"","sources":["../../../src/components/six-stage-indicator/six-stage-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;;qBAED,IAAI;;IAE/B,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,WAAK,KAAK,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE;YAClD,WAAK,KAAK,EAAC,gBAAgB;gBACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;gBACX,YAAM,KAAK,EAAE,YAAY;oBACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nexport type StageType = 'DEV' | 'ITU' | 'ETU' | 'ACCEPTANCE' | 'PROD' | null;\n\n@Component({\n  tag: 'six-stage-indicator',\n  styleUrl: 'six-stage-indicator.scss',\n  shadow: true,\n})\nexport class SixStageIndicator {\n  /** The indicators value attribute */\n  @Prop() stage: StageType = null;\n\n  render() {\n    return this.stage == null || this.stage == 'PROD' ? null : (\n      <div class={`indicator--${this.stage.toLowerCase()}`}>\n        <div class=\"center-content\">\n          <six-icon class=\"align-item\" size=\"small\">\n            error_outline\n          </six-icon>\n          <span class={'align-item'}>\n            <slot />\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-stage-indicator/test/six-stage-indicator.spec.js

@@ -0,0 +1,117 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixStageIndicator } from "../six-stage-indicator";
+describe('six-stage-indicator', () => {
+    it('default', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+       <six-stage-indicator>
+        <mock:shadow-root>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+    it('prod', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator stage="PROD"></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+       <six-stage-indicator stage="PROD">
+        <mock:shadow-root>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+    it('itu', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator stage="ITU"></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ITU">
+        <mock:shadow-root>
+        <div class=indicator--itu>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+    it('etu', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator stage="ETU"></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ETU">
+        <mock:shadow-root>
+        <div class=indicator--etu>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+    it('dev', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator stage="DEV"></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="DEV">
+        <mock:shadow-root>
+        <div class=indicator--dev>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+    it('acceptance', async () => {
+        const page = await newSpecPage({
+            components: [SixStageIndicator],
+            html: `<six-stage-indicator stage="ACCEPTANCE"></six-stage-indicator>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-stage-indicator stage="ACCEPTANCE">
+        <mock:shadow-root>
+        <div class=indicator--acceptance>
+          <div class='center-content'>
+            <six-icon class='align-item' size="small">
+              error_outline
+            </six-icon>
+            <span class='align-item'>
+              <slot />
+            </span>
+          </div>
+        </div>
+        </mock:shadow-root>
+      </six-stage-indicator>
+    `);
+    });
+});
+//# sourceMappingURL=six-stage-indicator.spec.js.map

package/dist/collection/components/six-stage-indicator/test/six-stage-indicator.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-stage-indicator.spec.js","sourceRoot":"","sources":["../../../../src/components/six-stage-indicator/test/six-stage-indicator.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,0DAA0D;SACjE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,yDAAyD;SAChE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;QAC1B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,gEAAgE;SACvE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixStageIndicator } from '../six-stage-indicator';\n\ndescribe('six-stage-indicator', () => {\n  it('default', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-stage-indicator>\n        <mock:shadow-root>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('prod', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"PROD\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-stage-indicator stage=\"PROD\">\n        <mock:shadow-root>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('itu', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ITU\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ITU\">\n        <mock:shadow-root>\n        <div class=indicator--itu>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('etu', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ETU\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ETU\">\n        <mock:shadow-root>\n        <div class=indicator--etu>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('dev', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"DEV\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"DEV\">\n        <mock:shadow-root>\n        <div class=indicator--dev>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n\n  it('acceptance', async () => {\n    const page = await newSpecPage({\n      components: [SixStageIndicator],\n      html: `<six-stage-indicator stage=\"ACCEPTANCE\"></six-stage-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-stage-indicator stage=\"ACCEPTANCE\">\n        <mock:shadow-root>\n        <div class=indicator--acceptance>\n          <div class='center-content'>\n            <six-icon class='align-item' size=\"small\">\n              error_outline\n            </six-icon>\n            <span class='align-item'>\n              <slot />\n            </span>\n          </div>\n        </div>\n        </mock:shadow-root>\n      </six-stage-indicator>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,170 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+.form-control .form-control__label {
+  display: none;
+}
+.form-control .form-control__help-text {
+  display: none;
+}
+.form-control .form-control__error-text {
+  display: none;
+  text-align: left;
+}
+
+.form-control--has-label .form-control__label {
+  display: inline-block;
+  color: var(--six-input-label-color);
+  font-weight: var(--six-font-weight-bold);
+  margin-bottom: var(--six-spacing-x-small);
+}
+.form-control--has-label .form-control__label__required::after {
+  color: var(--six-color-danger-800);
+  content: "*";
+  transform: scale(1.1);
+  margin-left: var(--six-spacing-xxx-small);
+  position: absolute;
+}
+.form-control--has-label.form-control--small .form-control__label {
+  font-size: var(--six-input-label-font-size-small);
+}
+.form-control--has-label.form-control--medium .form-control__label {
+  font-size: var(--six-input-label-font-size-medium);
+}
+.form-control--has-label.form-control--large .form-control_label {
+  font-size: var(--six-input-label-font-size-large);
+}
+
+.form-control--has-help-text .form-control__help-text {
+  display: block;
+  color: var(--six-input-help-text-color);
+  margin-top: var(--six-spacing-x-small);
+}
+.form-control--has-help-text .form-control__help-text ::slotted(*) {
+  margin-top: var(--six-spacing-xxx-small);
+}
+.form-control--has-help-text.form-control--small .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-small);
+}
+.form-control--has-help-text.form-control--medium .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-medium);
+}
+.form-control--has-help-text.form-control--large .form-control__help-text {
+  font-size: var(--six-input-help-text-font-size-large);
+}
+
+.form-control--has-error-text .form-control__error-text {
+  display: block;
+  margin-top: var(--six-spacing-xxx-small);
+}
+.form-control--has-error-text .form-control__error-text ::slotted(*) {
+  margin-top: var(--six-spacing-xxx-small);
+}
+.form-control--has-error-text.form-control--small .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-small);
+}
+.form-control--has-error-text.form-control--medium .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-medium);
+}
+.form-control--has-error-text.form-control--large .form-control__error-text {
+  font-size: var(--six-input-help-text-font-size-large);
+}
+
+.form-control--disabled .form-control__help-text {
+  color: var(--six-input-help-text-color-disabled);
+}
+.form-control--disabled .form-control__label {
+  color: var(--six-input-label-color-disabled);
+}
+
+.form-control--invalid:not(.form-control--disabled) .form-control__label {
+  color: var(--six-input-label-color);
+}
+
+/**
+ * @prop --width: The width of the switch.
+ * @prop --height: The height of the switch.
+ * @prop --thumb-size: The size of the thumb.
+ */
+:host {
+  --height: var(--six-selection-control-toggle-size);
+  --thumb-size: calc(var(--six-selection-control-toggle-size) - 4px);
+  --width: calc(var(--height) * 2);
+  display: inline-block;
+}
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--six-font-family);
+  font-size: var(--six-input-font-size-medium);
+  font-weight: var(--six-input-font-weight);
+  color: var(--six-input-color);
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.switch__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--width);
+  height: var(--height);
+  background-color: var(--six-selection-control-color-disabled);
+  border-radius: var(--height);
+  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color;
+}
+.switch__control .switch__thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background-color: var(--six-input-background-color);
+  border-radius: 50%;
+  transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));
+  transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) background-color, var(--six-transition-fast) border-color, var(--six-transition-fast) box-shadow;
+}
+.switch__control input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+}
+
+.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
+  background-color: var(--six-input-border-color-hover);
+}
+
+.switch--checked .switch__control {
+  background-color: var(--six-selection-control-color);
+}
+.switch--checked .switch__control .switch__thumb {
+  background-color: var(--six-color-white);
+  transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));
+}
+
+.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
+  background-color: var(--six-input-border-color-focus);
+}
+
+.switch--disabled {
+  cursor: not-allowed;
+  color: var(--six-selection-control-color-disabled);
+}
+.switch--disabled .switch__control {
+  background-color: var(--six-selection-control-color-disabled);
+}
+.switch--disabled.switch--checked .switch__control {
+  background-color: var(--six-selection-control-color-disabled);
+}
+
+.switch__label {
+  line-height: var(--height);
+  margin-left: 0.5em;
+  user-select: none;
+}