@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.9eaaa42

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js

@@ -0,0 +1,53 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItemGroup } from "../six-sidebar-item-group";
+import { SixSidebarItem } from "../../six-sidebar-item/six-sidebar-item";
+describe('six-sidebar-item-group', () => {
+  it('renders empty group', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItemGroup],
+      html: `<six-sidebar-item-group></six-sidebar-item-group>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+      </six-sidebar-item-group>
+    `);
+  });
+  it('renders group with item', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItemGroup, SixSidebarItem],
+      html: `<six-sidebar-item-group><six-sidebar-item value="data">Data</six-sidebar-item></six-sidebar-item-group>`,
+    });
+    await page.waitForChanges();
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+        <six-sidebar-item value="data">
+          <mock:shadow-root>
+            <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+              <slot></slot>
+            </div>
+          </mock:shadow-root>
+          Data
+        </six-sidebar-item>
+      </six-sidebar-item-group>
+    `);
+  });
+});
+//# sourceMappingURL=six-sidebar-item-group.spec.js.map

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;EACtC,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;MACjC,IAAI,EAAE,mDAAmD;KAC1D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;MACjD,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItemGroup } from '../six-sidebar-item-group';\nimport { SixSidebarItem } from '../../six-sidebar-item/six-sidebar-item';\n\ndescribe('six-sidebar-item-group', () => {\n  it('renders empty group', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup],\n      html: `<six-sidebar-item-group></six-sidebar-item-group>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n      </six-sidebar-item-group>\n    `);\n  });\n\n  it('renders group with item', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup, SixSidebarItem],\n      html: `<six-sidebar-item-group><six-sidebar-item value=\"data\">Data</six-sidebar-item></six-sidebar-item-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n        <six-sidebar-item value=\"data\">\n          <mock:shadow-root>\n            <div aria-disabled=\"false\" aria-selected=\"false\" class=\"sidebar-item\" role=\"menuitem\">\n              <slot></slot>\n            </div>\n          </mock:shadow-root>\n          Data\n        </six-sidebar-item>\n      </six-sidebar-item-group>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable

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

@@ -1 +1 @@
-{"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;;eAEP,KAAK;;EAEnB,aAAa;IACX,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;MAC3D,WAAK,KAAK,EAAC,wBAAwB;QACjC,WAAK,OAAO,EAAC,WAAW;UACtB,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;EAED,YAAY;IACV,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;EAClF,CAAC;EAED,MAAM;IACJ,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;EAC/D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              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\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"]}
+{"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAMH,MAAM,OAAO,UAAU;;eAEP,KAAK;;EAEX,aAAa;IACnB,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;MAC3D,WAAK,KAAK,EAAC,wBAAwB;QACjC,WAAK,OAAO,EAAC,WAAW;UACtB,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;EAClF,CAAC;EAED,MAAM;IACJ,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;EAC/D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              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\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"]}

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 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;EAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;IAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE,wCAAwC;KAC/C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,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 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.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class SixStageIndicator {
   constructor() {
     this.stage = null;
@@ -25,11 +25,12 @@ export class SixStageIndicator {
         "mutable": false,
         "complexType": {
           "original": "StageType",
-          "resolved": "\"ACCEPTANCE\" | \"DEV\" | \"ETU\" | \"ITU\" | \"PROD\"",
+          "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"
+              "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"
             }
           }
         },

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

@@ -1 +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;;iBAED,IAAI;;EAE/B,MAAM;IACJ,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;MAClD,WAAK,KAAK,EAAC,gBAAgB;QACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;QACX,YAAM,KAAK,EAAE,YAAY;UACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;EACJ,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"]}
+{"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;;iBAED,IAAI;;EAE/B,MAAM;IACJ,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;MAClD,WAAK,KAAK,EAAC,gBAAgB;QACzB,gBAAU,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,oBAE9B;QACX,YAAM,KAAK,EAAE,YAAY;UACvB,eAAQ,CACH,CACH,CACF,CACP,CAAC;EACJ,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;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,6CAA6C;KACpD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE;IACpB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,0DAA0D;KACjE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;KAK7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,KAAK,EAAE,KAAK,IAAI,EAAE;IACnB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE;IAC1B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,iBAAiB,CAAC;MAC/B,IAAI,EAAE,gEAAgE;KACvE,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,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

@@ -6,6 +6,86 @@
   box-sizing: inherit;
 }
 
+.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.