@six-group/ui-library 0.0.0-insider.03e5196

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

@@ -0,0 +1,92 @@
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested displayed text of the item.
+ */
+export class SixSidebarItem {
+  constructor() {
+    this.value = '';
+    this.selected = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: {
+        'sidebar-item': true,
+        'sidebar-item--selected': this.selected,
+        'sidebar-item--disabled': this.disabled,
+      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
+  }
+  static get is() { return "six-sidebar-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-sidebar-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-sidebar-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the item in a selected state."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the sidebar item in a disabled state."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=six-sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item/six-sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;iBAEQ,EAAE;oBAGC,KAAK;oBAGL,KAAK;;EAEzC,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;QACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;OACxC,EACD,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;MAE/C,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested displayed text of the item.\n */\n\n@Component({\n  tag: 'six-sidebar-item',\n  styleUrl: 'six-sidebar-item.scss',\n  shadow: true,\n})\nexport class SixSidebarItem {\n  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the item in a selected state. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Set to true to draw the sidebar item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  render() {\n    return (\n      <div\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,32 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+}
+
+.six-sidebar-item-group--childless::part(content) {
+  padding: 0 !important;
+}
+
+.six-sidebar-item-group--subgroup::part(header) {
+  background-color: transparent !important;
+}
+
+.six-sidebar-item-group__header-icon {
+  margin-left: 16px;
+  transform: translate(0px, -3px);
+}
+
+.six-sidebar-details__header {
+  display: flex;
+}
+
+.six-sidebar-details__header-icon {
+  margin-right: 1em;
+}

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

@@ -0,0 +1,159 @@
+import { h } from '@stencil/core';
+import { hasSlot } from '../../utils/slot';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested side bar [group] items.
+ */
+export class SixSidebarItemGroup {
+  constructor() {
+    this.provideSlot = (name) => {
+      if (this.summaryIconHasContent) {
+        return (h("div", { slot: name }, h("slot", { name: name })));
+      }
+      return (h("slot", { name: name, onSlotchange: () => {
+          this.summaryIconHasContent =
+            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+        } }));
+    };
+    this.hasItems = false;
+    this.name = '';
+    this.icon = '';
+    this.value = '';
+    this.open = false;
+    this.summaryIcon = undefined;
+    this.summaryIconHasContent = undefined;
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasItems = hasSlot(this.host);
+  }
+  isSubgroup() {
+    return !!this.host.parentElement.closest('six-sidebar-item-group');
+  }
+  render() {
+    return (h("six-details", { class: {
+        'six-sidebar-item-group--childless': !this.hasItems,
+        'six-sidebar-item-group--subgroup': this.isSubgroup(),
+      }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+  }
+  static get is() { return "six-sidebar-item-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-sidebar-item-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-sidebar-item-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of item group"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon of the group"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "summaryIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom summary icon name."
+        },
+        "attribute": "summary-icon",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasItems": {},
+      "summaryIconHasContent": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-sidebar-item-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;GAKG;AAOH,MAAM,OAAO,mBAAmB;;IAqC9B,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;MAC7B,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CACL,WAAK,IAAI,EAAE,IAAI;UACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,CACP,CAAC;OACH;MAED,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,GAAG,EAAE;UACjB,IAAI,CAAC,qBAAqB;YACxB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3G,CAAC,GACK,CACT,CAAC;IACJ,CAAC,CAAC;oBApDkB,KAAK;gBAGV,EAAE;gBAGF,EAAE;iBAGgB,EAAE;gBAEH,KAAK;;;;EAKrC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3D,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrC,CAAC;EAED,UAAU;IACR,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;EACrE,CAAC;EAwBD,MAAM;IACJ,OAAO,CACL,mBACE,KAAK,EAAE;QACL,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;QACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;OACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ;MAEzB,WAAK,IAAI,EAAC,SAAS;QACjB,WAAK,KAAK,EAAC,6BAA6B;UACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY;UACtF,IAAI,CAAC,IAAI,CACN,CACF;MACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;MACjC,eAAQ,CACI,CACf,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon: string;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  isSubgroup() {\n    return !!this.host.parentElement.closest('six-sidebar-item-group');\n  }\n\n  @State() summaryIconHasContent: boolean;\n\n  provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          this.summaryIconHasContent =\n            this.host.shadowRoot.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`).assignedNodes().length > 0;\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,79 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --track-color: The color of the spinner's track.
+ * @prop --indicator-color: The color of the spinner's indicator.
+ * @prop --stroke-width: The width of the indicator.
+ */
+:host {
+  --track-color: var(--six-progress-track-color);
+  --indicator-color: var(--six-progress-indicator-color);
+  --stroke-width: 2px;
+  display: inline-flex;
+}
+
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  border: solid var(--stroke-width) var(--track-color);
+  border-top-color: var(--indicator-color);
+  border-right-color: var(--indicator-color);
+  animation: 1s linear infinite spin;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.six-spinner {
+  width: auto;
+  height: auto;
+  position: relative;
+}
+.six-spinner .six-spinner__container {
+  margin: 0;
+  transform: translateX(0);
+}
+.six-spinner .six-spinner__container svg {
+  transform: translateX(0);
+}
+.six-spinner__container {
+  position: relative;
+  margin: 0 auto;
+  top: calc(50% - 20px);
+  z-index: 1;
+}
+.six-spinner__container, .six-spinner__container svg {
+  width: 40px;
+  height: 40px;
+  display: block;
+  transform: translateX(40px);
+}
+.six-spinner path {
+  stroke-dashoffset: 70px;
+  stroke-dasharray: 70, 444;
+  -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
+  animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
+}
+@-webkit-keyframes six-spinner {
+  to {
+    stroke-dashoffset: -444;
+  }
+}
+@keyframes six-spinner {
+  to {
+    stroke-dashoffset: -444;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixSpinner {
+  constructor() {
+    this.six = false;
+  }
+  renderSIXLogo() {
+    return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", 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" })))));
+  }
+  renderSimple() {
+    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+  }
+  render() {
+    return this.six ? this.renderSIXLogo() : this.renderSimple();
+  }
+  static get is() { return "six-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-spinner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-spinner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "six": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates if the spinner is shown as animated SIX logo or simple spinner."
+        },
+        "attribute": "six",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=six-spinner.js.map

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

@@ -0,0 +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"]}

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: inherit;
+}
+
+: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,49 @@
+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\"",
+          "references": {
+            "StageType": {
+              "location": "local",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-stage-indicator/six-stage-indicator.tsx"
+            }
+          }
+        },
+        "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;;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-switch/six-switch.css

@@ -0,0 +1,90 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @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;
+}