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

package/dist/collection/components/six-file-upload/six-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler({ dataTransfer }: DragEvent) {\n    if (!this.disabled) {\n      this.isOver = false;\n      if (dataTransfer != null) {\n        this.handleFiles(dataTransfer.files);\n      }\n    }\n  }\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled,\n        }}\n      >\n        <Container\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            <span>{this.renderLabel()}</span>\n            <input\n              class=\"six-file-upload__input\"\n              type=\"file\"\n              name=\"resume\"\n              disabled={this.disabled}\n              accept={this.accept}\n              multiple={this.multiple}\n              onChange={this.onChange}\n              ref={(el) => (this.fileInput = el)}\n            />\n          </div>\n        </Container>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\ninterface ISingleFile {\n  file: File;\n}\n\ninterface IMultipleFiles {\n  files: FileList;\n}\n\nexport type SixFileUploadSuccessPayload = ISingleFile | IMultipleFiles;\n\nexport interface SixFileUploadFailurePayload {\n  reason: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n * @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n */\n@Component({\n  tag: 'six-file-upload',\n  styleUrl: 'six-file-upload.scss',\n  scoped: true,\n  shadow: false,\n})\nexport class SixFileUpload {\n  @Element() readonly host!: HTMLSixFileUploadElement;\n\n  private fileInput?: HTMLInputElement;\n\n  @State() isOver = false;\n  @State() hasError = false;\n\n  /** Set to true if file control should be small. */\n  @Prop() readonly compact: boolean = false;\n\n  /** Label of the drop area. */\n  @Prop() readonly label?: string;\n\n  /** Set when button is disabled. */\n  @Prop() readonly disabled = false;\n\n  /** Accepted MIME-Types. */\n  @Prop() readonly accept?: string;\n\n  /** More than one file allowed. */\n  @Prop() readonly multiple = false;\n\n  /** Allowed max file size in bytes. */\n  @Prop() readonly maxFileSize?: number;\n\n  /** Set to true to draw the control in a loading state. */\n  @Prop({ reflect: true }) uploading = false;\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Triggers when a file is added. */\n  @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n  /** Triggers when an uploaded file doesn't match MIME type or max file size. */\n  @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n  @Listen('dragenter', { capture: false })\n  dragenterHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragover', { capture: false })\n  dragoverHandler() {\n    if (!this.disabled) {\n      this.isOver = true;\n    }\n  }\n\n  @Listen('dragleave', { capture: false })\n  dragleaveHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  @Listen('drop', { capture: false })\n  dropHandler() {\n    if (!this.disabled) {\n      this.isOver = false;\n    }\n  }\n\n  private handleSlotChange = () => {\n    let validType = false;\n\n    if (\n      this.errorText != null &&\n      ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||\n        (typeof this.errorText == 'object' && this.errorText.length > 0))\n    ) {\n      validType = true;\n    }\n\n    this.hasError = validType || hasSlot(this.host, 'error-text');\n  };\n\n  private handleFiles = (files: FileList) => {\n    if (this.disabled || files.length === 0 || this.uploading) {\n      return;\n    }\n\n    if (!this.multiple && files.length > 1) {\n      return this.failure.emit({ reason: 'Only one file is allowed.' });\n    }\n\n    for (const file of files) {\n      if (file == null) {\n        return;\n      }\n\n      let acceptedTypesList: string[] = [];\n      if (this.accept != null) {\n        acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n      }\n\n      if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n        const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n        return this.failure.emit({ reason });\n      }\n\n      if (this.maxFileSize != null && file.size > this.maxFileSize) {\n        const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n        return this.failure.emit({ reason });\n      }\n    }\n\n    const eventPayload: SixFileUploadSuccessPayload = this.multiple ? { files } : { file: files[0] };\n    this.success.emit(eventPayload);\n  };\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.addEventListener(eventName, this.preventDefaults, false);\n      document.body.addEventListener(eventName, this.preventDefaults, false);\n    });\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n      this.host.removeEventListener(eventName, this.preventDefaults, false);\n      document.body.removeEventListener(eventName, this.preventDefaults, false);\n    });\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private preventDefaults(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  private onChange = () => {\n    if (this.fileInput?.files != null) {\n      const files = this.fileInput.files;\n      this.handleFiles(files);\n      this.fileInput.value = '';\n    }\n  };\n\n  private renderLabel() {\n    return (\n      this.label ??\n      (this.compact ? (\n        'Upload'\n      ) : (\n        <span>\n          Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n        </span>\n      ))\n    );\n  }\n\n  render() {\n    const Container = this.compact ? 'six-button' : 'six-card';\n\n    const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n      (text) => text != null && text.trim() !== ''\n    );\n\n    return (\n      <div\n        class={{\n          'six-file-upload': true,\n          'six-file-upload--disabled': this.disabled || this.uploading,\n        }}\n      >\n        <Container\n          disabled={this.disabled || this.uploading}\n          aria-invalid={this.invalid ? 'true' : 'false'}\n          class={{\n            'six-file-upload__container--compact': this.compact,\n            'six-file-upload__container--full': !this.compact,\n          }}\n        >\n          {this.compact && !this.uploading && (\n            <span slot=\"prefix\">\n              <six-icon class=\"six-file-upload__label-icon\">arrow_circle_up</six-icon>\n            </span>\n          )}\n          <div\n            class={{\n              'six-file-upload__drop-zone': true,\n              'six-file-upload__drop-zone--hover': this.isOver,\n              'six-file-upload__drop-zone--compact': this.compact,\n            }}\n          >\n            {this.uploading ? (\n              <span class=\"six-file-upload__drop-zone__spinner-container\">\n                <six-spinner /> Uploading...\n              </span>\n            ) : (\n              <div>\n                <span>{this.renderLabel()}</span>\n                <input\n                  class=\"six-file-upload__input\"\n                  type=\"file\"\n                  name=\"resume\"\n                  disabled={this.disabled}\n                  accept={this.accept}\n                  multiple={this.multiple}\n                  onChange={this.onChange}\n                  ref={(el) => (this.fileInput = el)}\n                />\n              </div>\n            )}\n          </div>\n        </Container>\n        <div aria-hidden={this.invalid ? 'false' : 'true'}>\n          <slot name=\"error-text\">\n            {errorMessages.map((text) => (\n              <six-error>\n                <div class=\"six-file-upload__error-text\">{text}</div>\n              </six-error>\n            ))}\n          </slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -16,5 +16,5 @@
   text-align: center;
   width: 100%;
   background-color: var(--six-footer-background-color);
-  box-shadow: var(--six-shadow-x-large-top);
+  box-shadow: var(--six-shadow-medium-top);
 }

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable
@@ -6,20 +6,20 @@ import { h } from '@stencil/core';
  * @slot - Used to define the content of the footer.
  */
 export class SixFooter {
-  render() {
-    return (h("footer", { class: "six-footer" }, h("slot", null)));
-  }
-  static get is() { return "six-footer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-footer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-footer.css"]
-    };
-  }
+    render() {
+        return (h("footer", { key: '4f5f18d1cca92c1aff56451ef0a6a7b4061f9200', class: "six-footer" }, h("slot", { key: '9f3b30e7c28c2e6ae677874ed8203cec624c6d4f' })));
+    }
+    static get is() { return "six-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-footer.css"]
+        };
+    }
 }
 //# sourceMappingURL=six-footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;EACpB,MAAM;IACJ,OAAO,CACL,cAAQ,KAAK,EAAC,YAAY;MACxB,eAAQ,CACD,CACV,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the footer.\n */\n\n@Component({\n  tag: 'six-footer',\n  styleUrl: 'six-footer.scss',\n  shadow: true,\n})\nexport class SixFooter {\n  render() {\n    return (\n      <footer class=\"six-footer\">\n        <slot />\n      </footer>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-footer.js","sourceRoot":"","sources":["../../../src/components/six-footer/six-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;GAKG;AAOH,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,YAAY;YACxB,8DAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the footer.\n */\n\n@Component({\n  tag: 'six-footer',\n  styleUrl: 'six-footer.scss',\n  shadow: true,\n})\nexport class SixFooter {\n  render() {\n    return (\n      <footer class=\"six-footer\">\n        <slot />\n      </footer>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-group-label/six-group-label.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 .form-control .form-control__label {
@@ -14,6 +14,7 @@
 }
 .form-control .form-control__error-text {
   display: none;
+  text-align: left;
 }
 
 .form-control--has-label .form-control__label {
@@ -25,6 +26,9 @@
 .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);
@@ -56,7 +60,6 @@
 
 .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(*) {

package/dist/collection/components/six-group-label/six-group-label.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import FormControl from '../../functional-components/form-control/form-control';
-import { hasSlot } from '../../utils/slot';
+import { h } from "@stencil/core";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
 let id = 0;
 /**
  * @since 1.1
@@ -16,160 +16,160 @@ let id = 0;
  * @part help-text - The help text of the wrapped component.
  */
 export class SixGroupLabel {
-  constructor() {
-    this.wrapperLabelId = `label-${++id}`;
-    this.labelId = `label-label-${id}`;
-    this.helpTextId = `label-help-text-${id}`;
-    this.handleSlotChange = () => {
-      this.hasLabelSlot = hasSlot(this.host, 'label');
-      this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    };
-    this.hasHelpTextSlot = false;
-    this.hasLabelSlot = false;
-    this.size = 'medium';
-    this.label = '';
-    this.helpText = '';
-    this.disabled = false;
-    this.required = false;
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  connectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
-  }
-  render() {
-    return (h(FormControl, { inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", null)));
-  }
-  static get is() { return "six-group-label"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-group-label.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-group-label.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large'",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label's size."
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'medium'"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The wrapper label's label. Alternatively, you can use the label slot."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "helpText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The wrapper label's help text. Alternatively, you can use the help-text slot."
-        },
-        "attribute": "help-text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to disable the label."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label's required attribute."
-        },
-        "attribute": "required",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasHelpTextSlot": {},
-      "hasLabelSlot": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "helpText",
-        "methodName": "handleLabelChange"
-      }, {
-        "propName": "label",
-        "methodName": "handleLabelChange"
-      }];
-  }
+    constructor() {
+        this.wrapperLabelId = `label-${++id}`;
+        this.labelId = `label-label-${id}`;
+        this.helpTextId = `label-help-text-${id}`;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+        };
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.size = 'medium';
+        this.label = '';
+        this.helpText = '';
+        this.disabled = false;
+        this.required = false;
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    render() {
+        return (h(FormControl, { key: '7c2d6731a0d81d8781f4556e1c7071e352f755ca', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'e52acfadba9bb3902f5599fc60b7e51d315b7aec' })));
+    }
+    static get is() { return "six-group-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-group-label.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-group-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label's size."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The wrapper label's label. Alternatively, you can use the label slot."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The wrapper label's help text. Alternatively, you can use the help-text slot."
+                },
+                "attribute": "help-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to disable the label."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true to show an asterisk beneath the label."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasHelpTextSlot": {},
+            "hasLabelSlot": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "helpText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-group-label.js.map

package/dist/collection/components/six-group-label/six-group-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;;IAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;IACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;IAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;IAwCrC,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACzD,CAAC,CAAC;2BAvCyB,KAAK;wBACR,KAAK;gBAGiC,QAAQ;iBAGtD,EAAE;oBAGC,EAAE;oBAGe,KAAK;oBAGL,KAAK;;EAIzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,iBAAiB;;IACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EACjF,CAAC;EAOD,MAAM;IACJ,OAAO,CACL,EAAC,WAAW,IACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MAEvB,eAAa,CACD,CACf,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The label's required attribute. */\n  @Prop({ reflect: true }) required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;;QAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAwCrC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjF,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,qDACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,8DAAa,CACD,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {
@@ -21,39 +21,28 @@
 .six-header {
   display: flex;
   width: 100%;
-  height: 3.75rem;
+  height: var(--six-header-height);
   background-color: var(--six-header-background-color);
-  align-items: center;
-  flex-wrap: wrap;
-  box-shadow: var(--six-shadow-x-large);
+  align-items: stretch;
+  box-shadow: var(--six-shadow-medium);
   border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);
 }
-.six-header__logo {
-  width: 6rem;
-  margin-top: 0.15rem;
-}
 .six-header__logo--clickable {
   cursor: pointer;
 }
 .six-header__placeholder {
   flex: 1;
 }
-.six-header__menu, .six-header__logo, .six-header__custom, .six-header__search, .six-header__notification, .six-header__app-switcher, .six-header__profile {
-  height: calc(100% - 0.25rem - 1px);
-  padding: 0 1.25rem;
+.six-header__app-switcher-dropdown {
   display: flex;
   align-items: center;
-  border-bottom: solid 0.25rem transparent;
-}
-.six-header__menu--open, .six-header__logo--open, .six-header__custom--open, .six-header__search--open, .six-header__notification--open, .six-header__app-switcher--open, .six-header__profile--open {
-  border-bottom: solid 0.25rem var(--six-header-border-color-open);
 }
 .six-header__selected-app {
   cursor: pointer;
-  font-size: 0.9rem;
-  font-weight: 600;
+  font-size: var(--six-font-size-small);
+  font-weight: var(--six-font-weight-bold);
   padding-right: 0;
-  padding-left: 0.3rem;
+  padding-left: var(--six-spacing-x-small);
 }
 .six-header__selected-app:hover {
   color: var(--six-header-selected-app-color-hover);