@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.db2b416

package/dist/collection/components/six-sidebar-item/six-sidebar-item.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-sidebar-item/test/six-sidebar-item.spec.js

@@ -0,0 +1,50 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItem } from "../six-sidebar-item";
+describe('six-sidebar-item', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+  it('render disabled attribute', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item disabled></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item disabled="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="true" aria-selected="false" class="sidebar-item sidebar-item--disabled" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+  it('render selected attribute', async () => {
+    const page = await newSpecPage({
+      components: [SixSidebarItem],
+      html: `<six-sidebar-item selected></six-sidebar-item>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-sidebar-item selected="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="true" class="sidebar-item sidebar-item--selected" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+  });
+});
+//# sourceMappingURL=six-sidebar-item.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item/test/six-sidebar-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,uCAAuC;KAC9C,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;MAC5B,IAAI,EAAE,gDAAgD;KACvD,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItem } from '../six-sidebar-item';\n\ndescribe('six-sidebar-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item value=\"\">\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      </six-sidebar-item>\n    `);\n  });\n\n  it('render disabled attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item disabled></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item disabled=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"true\" aria-selected=\"false\" class=\"sidebar-item sidebar-item--disabled\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n\n  it('render selected attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item selected></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item selected=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"true\" class=\"sidebar-item sidebar-item--selected\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
+import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
 /**
  * @since 1.0
  * @status stable

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--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--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--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--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/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;
@@ -29,7 +29,8 @@ export class SixStageIndicator {
           "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,83 @@
   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;
+}
+
+.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: "*";
+}
+.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;
+  color: var(--six-color-danger-800);
+  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.