@six-group/ui-library 0.0.0-insider.931e1d7 → 0.0.0-insider.98c4058

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

@@ -1,18 +1,31 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as hasSlot } from './slot.js';
-import { d as defineCustomElement$4 } from './six-error2.js';
-import { d as defineCustomElement$3 } from './six-icon2.js';
-import { d as defineCustomElement$2 } from './six-spinner2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$4 } from './p-Ba-Z8Etn.js';
+import { d as defineCustomElement$3 } from './p-Q3Zlhwd0.js';
+import { d as defineCustomElement$2 } from './p-Dgi7xz4X.js';
 
 const sixFileUploadCss = ".sc-six-file-upload-h{position:relative;box-sizing:border-box}.sc-six-file-upload-h *.sc-six-file-upload,.sc-six-file-upload-h *.sc-six-file-upload:before,.sc-six-file-upload-h *.sc-six-file-upload:after{box-sizing:border-box}.sc-six-file-upload-h{position:static;display:block}.six-file-upload.sc-six-file-upload six-card.sc-six-file-upload{box-shadow:none;padding:0;width:100%}.six-file-upload__label--highlighted.sc-six-file-upload{color:var(--six-color-action-600)}.six-file-upload__container--full.sc-six-file-upload{border:dashed 1px var(--six-color-web-rock-500)}.six-file-upload__label-icon.sc-six-file-upload{margin-right:0.5rem}.six-file-upload__drop-zone.sc-six-file-upload{padding:2rem 0;display:flex;justify-content:center;width:100%;transition:background-color 0.3s}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload{display:flex;align-items:center}.six-file-upload__drop-zone__spinner-container.sc-six-file-upload six-spinner.sc-six-file-upload{margin-right:var(--six-spacing-x-small)}.six-file-upload__drop-zone--compact.sc-six-file-upload{padding:0}.six-file-upload__input.sc-six-file-upload{cursor:pointer;position:absolute;top:0;left:0;width:100%;user-select:none;height:100%;opacity:0;outline:none}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__drop-zone.sc-six-file-upload{background-color:var(--six-color-inactive);cursor:not-allowed}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover,.six-file-upload__drop-zone--hover.sc-six-file-upload{background-color:var(--six-color-action-light-to-be-defined)}.six-file-upload.sc-six-file-upload:not(.six-file-upload--disabled) .six-file-upload__drop-zone.sc-six-file-upload:hover.six-file-upload__drop-zone--compact,.six-file-upload__drop-zone--hover.six-file-upload__drop-zone--compact.sc-six-file-upload{background-color:inherit}.six-file-upload--disabled.sc-six-file-upload .six-file-upload__input.sc-six-file-upload{cursor:not-allowed}.six-file-upload__error-text.sc-six-file-upload{font-size:var(--six-input-help-text-font-size-medium)}";
-const SixFileUploadStyle0 = sixFileUploadCss;
 
-const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload extends HTMLElement {
+const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.success = createEvent(this, "six-file-upload-success", 7);
-        this.failure = createEvent(this, "six-file-upload-failure", 7);
+        this.success = createEvent(this, "six-file-upload-success");
+        this.failure = createEvent(this, "six-file-upload-failure");
+        this.isOver = false;
+        this.hasError = false;
+        /** Set to true if file control should be small. */
+        this.compact = false;
+        /** Set when button is disabled. */
+        this.disabled = false;
+        /** More than one file allowed. */
+        this.multiple = false;
+        /** Set to true to draw the control in a loading state. */
+        this.uploading = false;
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
         this.handleSlotChange = () => {
             let validType = false;
             if (this.errorText != null &&
@@ -57,17 +70,6 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
                 this.fileInput.value = '';
             }
         };
-        this.isOver = false;
-        this.hasError = false;
-        this.compact = false;
-        this.label = undefined;
-        this.disabled = false;
-        this.accept = undefined;
-        this.multiple = false;
-        this.maxFileSize = undefined;
-        this.uploading = false;
-        this.errorText = '';
-        this.invalid = false;
     }
     dragenterHandler() {
         if (!this.disabled) {
@@ -132,7 +134,7 @@ const SixFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class SixFileUpload ext
             } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: 'b3959e13c80f7d12102ef746aaa290bb9e420547', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: '979d2e80ad7028b300cc5a80888cb5f3fcfb598e', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
     }
     get host() { return this; }
-    static get style() { return SixFileUploadStyle0; }
+    static get style() { return sixFileUploadCss; }
 }, [6, "six-file-upload", {
         "compact": [4],
         "label": [1],
@@ -179,5 +181,6 @@ const SixFileUpload = SixFileUpload$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixFileUpload, defineCustomElement };
+//# sourceMappingURL=six-file-upload.js.map
 
 //# sourceMappingURL=six-file-upload.js.map

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

@@ -1 +1 @@
-{"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &__spinner-container {\n      display: flex;\n      align-items: center;\n\n      six-spinner {\n        margin-right: var(--six-spacing-x-small);\n      }\n    }\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n    cursor: not-allowed;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n\n  &__error-text {\n    font-size: var(--six-input-help-text-font-size-medium);\n  }\n}\n","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"],"version":3}
+{"file":"six-file-upload.js","mappings":"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","names":["SixFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-upload/six-file-upload.scss?tag=six-file-upload&encapsulation=scoped","src/components/six-file-upload/six-file-upload.tsx"],"sourcesContent":["@import 'src/global/component';\n\n$over-color: var(--six-color-action-light-to-be-defined);\n$disabled-color: var(--six-color-inactive);\n$transition: 0.3s;\n$margin: 1rem;\n\n:host {\n  position: static;\n  display: block;\n}\n\n.six-file-upload {\n  six-card {\n    box-shadow: none;\n    padding: 0;\n    width: 100%;\n  }\n\n  &__label {\n    &--highlighted {\n      color: var(--six-color-action-600);\n    }\n  }\n\n  &__container {\n    &--full {\n      border: dashed 1px var(--six-color-web-rock-500);\n    }\n  }\n\n  &__label-icon {\n    margin-right: 0.5rem;\n  }\n\n  &__drop-zone {\n    padding: 2rem 0;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    transition: background-color $transition;\n\n    &__spinner-container {\n      display: flex;\n      align-items: center;\n\n      six-spinner {\n        margin-right: var(--six-spacing-x-small);\n      }\n    }\n\n    &--compact {\n      padding: 0;\n    }\n  }\n\n  &__input {\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    user-select: none;\n    height: 100%;\n    opacity: 0;\n    outline: none;\n  }\n\n  &--disabled &__drop-zone {\n    background-color: $disabled-color;\n    cursor: not-allowed;\n  }\n\n  &:not(.six-file-upload--disabled) &__drop-zone:hover,\n  &__drop-zone--hover {\n    background-color: $over-color;\n\n    &.six-file-upload__drop-zone--compact {\n      background-color: inherit;\n    }\n  }\n\n  &--disabled &__input {\n    cursor: not-allowed;\n  }\n\n  &__error-text {\n    font-size: var(--six-input-help-text-font-size-medium);\n  }\n}\n","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"],"version":3}

package/dist/components/six-footer.js

@@ -1,18 +1,17 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
 
 const sixFooterCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.six-footer{color:var(--six-color-web-rock-900);padding:var(--six-spacing-x-small) 0;text-align:center;width:100%;background-color:var(--six-footer-background-color);box-shadow:var(--six-shadow-medium-top)}";
-const SixFooterStyle0 = sixFooterCss;
 
-const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends HTMLElement {
+const SixFooter$1 = /*@__PURE__*/ proxyCustomElement(class SixFooter extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
     }
     render() {
-        return (h("footer", { key: '4f5f18d1cca92c1aff56451ef0a6a7b4061f9200', class: "six-footer" }, h("slot", { key: '9f3b30e7c28c2e6ae677874ed8203cec624c6d4f' })));
+        return (h("footer", { key: 'be31134b91e323b0fdd39eec797a379fff376f52', class: "six-footer" }, h("slot", { key: '8d1ca2429473adbd0b7ca48ba6daf537eae83c8b' })));
     }
-    static get style() { return SixFooterStyle0; }
+    static get style() { return sixFooterCss; }
 }, [1, "six-footer"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -32,5 +31,6 @@ const SixFooter = SixFooter$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixFooter, defineCustomElement };
+//# sourceMappingURL=six-footer.js.map
 
 //# sourceMappingURL=six-footer.js.map

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

@@ -1 +1 @@
-{"file":"six-footer.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6UAA6U,CAAC;AACnW,wBAAe,YAAY;;MCadA,WAAS;;;;;;IACpB,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAC,YAAY,IACxB,8DAAQ,CACD,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["SixFooter"],"sources":["src/components/six-footer/six-footer.scss?tag=six-footer&encapsulation=shadow","src/components/six-footer/six-footer.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-footer {\n  color: var(--six-color-web-rock-900);\n  padding: var(--six-spacing-x-small) 0;\n  text-align: center;\n  width: 100%;\n  background-color: var(--six-footer-background-color);\n  box-shadow: var(--six-shadow-medium-top);\n}\n","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","mappings":";;AAAA,MAAM,YAAY,GAAG,6UAA6U;;MCcrVA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;IACpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,YAAY,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-footer/six-footer.scss?tag=six-footer&encapsulation=shadow","src/components/six-footer/six-footer.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.six-footer {\n  color: var(--six-color-web-rock-900);\n  padding: var(--six-spacing-x-small) 0;\n  text-align: center;\n  width: 100%;\n  background-color: var(--six-footer-background-color);\n  box-shadow: var(--six-shadow-medium-top);\n}\n","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}

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

@@ -1,13 +1,12 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { F as FormControl } from './form-control.js';
-import { h as hasSlot } from './slot.js';
-import { d as defineCustomElement$2 } from './six-error2.js';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { F as FormControl } from './p-Cc_nfyAl.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$2 } from './p-Ba-Z8Etn.js';
 
 const sixGroupLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}";
-const SixGroupLabelStyle0 = sixGroupLabelCss;
 
 let id = 0;
-const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel extends HTMLElement {
+const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -15,17 +14,22 @@ const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel ext
         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;
+        /** The label's size. */
         this.size = 'medium';
+        /** The wrapper label's label. Alternatively, you can use the label slot. */
         this.label = '';
+        /** The wrapper label's help text. Alternatively, you can use the help-text slot. */
         this.helpText = '';
+        /** Set to true to disable the label. */
         this.disabled = false;
+        /** Set to true to show an asterisk beneath the label. */
         this.required = false;
+        this.handleSlotChange = () => {
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+        };
     }
     handleLabelChange() {
         this.handleSlotChange();
@@ -42,14 +46,14 @@ const SixGroupLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixGroupLabel ext
         (_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' })));
+        return (h(FormControl, { key: '52068b77e2fd778f901a7431ecb4a8eae71a0088', 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: '3d4d8c1137a0d5d03b19ed12f77dd920f60856db' })));
     }
     get host() { return this; }
     static get watchers() { return {
         "helpText": ["handleLabelChange"],
         "label": ["handleLabelChange"]
     }; }
-    static get style() { return SixGroupLabelStyle0; }
+    static get style() { return sixGroupLabelCss; }
 }, [1, "six-group-label", {
         "size": [513],
         "label": [1],
@@ -85,5 +89,6 @@ const SixGroupLabel = SixGroupLabel$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixGroupLabel, defineCustomElement };
+//# sourceMappingURL=six-group-label.js.map
 
 //# sourceMappingURL=six-group-label.js.map

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

@@ -1 +1 @@
-{"file":"six-group-label.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,y/EAAy/E,CAAC;AACnhF,4BAAe,gBAAgB;;ACG/B,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBEA,eAAa;;;;;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;YACzB,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;SACxD,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAChF;IAOD,MAAM;QACJ,QACE,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,IAEvB,8DAAa,CACD,EACd;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel"],"sources":["src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","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"],"version":3}
+{"file":"six-group-label.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,y/EAAy/E;;ACIlhF,IAAI,EAAE,GAAG,CAAC;MAoBGA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAA,CAAA,cAAc,GAAG,SAAS,EAAE,EAAE,EAAE;AAChC,QAAA,IAAA,CAAA,OAAO,GAAG,CAAe,YAAA,EAAA,EAAE,EAAE;AAC7B,QAAA,IAAA,CAAA,UAAU,GAAG,CAAmB,gBAAA,EAAA,EAAE,EAAE;AAInC,QAAA,IAAe,CAAA,eAAA,GAAG,KAAK;AACvB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;;AAGJ,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAG9D,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGjC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAoBhB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;YAC/C,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;AACxD,SAAC;AAoBF;IAvCC,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;;AACf,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAG7E,iBAAiB,GAAA;QACf,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,oBAAoB,GAAA;;AAClB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC;;IAQhF,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,WAAW,EAAA,EAAA,GAAA,EAAA,0CAAA,EACV,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,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixGroupLabel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-group-label/six-group-label.scss?tag=six-group-label&encapsulation=shadow","src/components/six-group-label/six-group-label.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: block;\n}\n","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"],"version":3}

package/dist/components/six-header-dropdown-item.js

@@ -1,21 +1,29 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getSlot } from './slot.js';
-import { d as defineCustomElement$8 } from './six-checkbox2.js';
-import { d as defineCustomElement$7 } from './six-dropdown2.js';
-import { d as defineCustomElement$6 } from './six-error2.js';
-import { d as defineCustomElement$5 } from './six-icon2.js';
-import { d as defineCustomElement$4 } from './six-input2.js';
-import { d as defineCustomElement$3 } from './six-menu2.js';
-import { d as defineCustomElement$2 } from './six-menu-item2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$8 } from './p-4htQuoFD.js';
+import { d as defineCustomElement$7 } from './p-CMn2PWhi.js';
+import { d as defineCustomElement$6 } from './p-Ba-Z8Etn.js';
+import { d as defineCustomElement$5 } from './p-Q3Zlhwd0.js';
+import { d as defineCustomElement$4 } from './p-CRqqZ-BJ.js';
+import { d as defineCustomElement$3 } from './p-iFKJjyZC.js';
+import { d as defineCustomElement$2 } from './p-BKLtju-g.js';
 
-const sixHeaderDropdownItemCss = ":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent;transition:var(--six-transition-fast) border-color}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open);transition:var(--six-transition-fast) border-color}";
-const SixHeaderDropdownItemStyle0 = sixHeaderDropdownItemCss;
+const sixHeaderDropdownItemCss = ":host{height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
 
-const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderDropdownItem extends HTMLElement {
+const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderDropdownItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * Set to true to allow auto filtering for entries in the dropdown.
+         * With this flag the dropdown will automatically filter itsel.
+         * If you need to coordinate the shown elements yourself,
+         * e.g. because you need to call an endpoint use asyncFilter instead
+         */
+        this.filter = false;
+        /** The filter's placeholder text. */
+        this.filterPlaceholder = 'Filter...';
         this.active = false;
     }
     connectedCallback() {
@@ -25,9 +33,9 @@ const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader
         this.updateDropdownDistance();
     }
     render() {
-        return (h(Host, { key: 'fc1c8ffcb391ed1d9ba3d0fd27e8c599e169b3d1', class: {
+        return (h(Host, { key: '38587d2dbad8464c9e50b50916d0a6ba2f091f29', class: {
                 'six-header-dropdown-item--active': this.active,
-            } }, h("six-dropdown", { key: 'd8620f944a5b888a52880d7977f49edf0353b6ad', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false) }, h("slot", { key: 'bf1852e25863a45f9c1aa047cd9d9ceb5d7eba81', slot: "trigger", name: "trigger" }), h("slot", { key: '3461d0e1d484326400db97087689c6375269a974' }))));
+            } }, h("six-dropdown", { key: 'bac98396c2586acf69d7007bee458cc286c2a138', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: 'beaa9675bfdc74095b819bd2c19f9ad3e48f596d', slot: "trigger", name: "trigger" }), h("slot", { key: 'b7ad52b7e08eef6b282c721c7fe2fbcb467bf543' }))));
     }
     updateDropdownDistance() {
         const trigger = getSlot(this.host, 'trigger');
@@ -42,8 +50,10 @@ const SixHeaderDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader
         }
     }
     get host() { return this; }
-    static get style() { return SixHeaderDropdownItemStyle0; }
+    static get style() { return sixHeaderDropdownItemCss; }
 }, [1, "six-header-dropdown-item", {
+        "filter": [4],
+        "filterPlaceholder": [1, "filter-placeholder"],
         "active": [32]
     }]);
 function defineCustomElement$1() {
@@ -99,5 +109,6 @@ const SixHeaderDropdownItem = SixHeaderDropdownItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeaderDropdownItem, defineCustomElement };
+//# sourceMappingURL=six-header-dropdown-item.js.map
 
 //# sourceMappingURL=six-header-dropdown-item.js.map

package/dist/components/six-header-dropdown-item.js.map

@@ -1 +1 @@
-{"file":"six-header-dropdown-item.js","mappings":";;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,idAAid,CAAC;AACnf,oCAAe,wBAAwB;;MCY1BA,uBAAqB;;;;;sBACd,KAAK;;IAMvB,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI,CAAC,MAAM;aAChD,IAED,qEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,QACL,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,yBACD,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,yBAC1B,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAEhD,6DAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAG,EACtC,8DAAQ,CACK,CACV,EACP;KACH;IAEO,sBAAsB;QAC5B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;YAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC1D,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAC3D,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAC3D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YAC7D,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC,CAAC;YACjE,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;SAC1D;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderDropdownItem"],"sources":["src/components/six-header-dropdown-item/six-header-dropdown-item.scss?tag=six-header-dropdown-item&encapsulation=shadow","src/components/six-header-dropdown-item/six-header-dropdown-item.tsx"],"sourcesContent":[":host {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n  transition: var(--six-transition-fast) border-color;\n}\n\n:host(.six-header-dropdown-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n  transition: var(--six-transition-fast) border-color;\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 4.2.7\n * @status beta\n */\n\n@Component({\n  tag: 'six-header-dropdown-item',\n  styleUrl: 'six-header-dropdown-item.scss',\n  shadow: true,\n})\nexport class SixHeaderDropdownItem {\n  @State() active = false;\n\n  @Element() host!: HTMLSixHeaderDropdownItemElement;\n\n  private dropdownElement?: HTMLSixDropdownElement;\n\n  connectedCallback() {\n    this.updateDropdownDistance();\n  }\n\n  componentDidLoad() {\n    this.updateDropdownDistance();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-dropdown-item--active': this.active,\n        }}\n      >\n        <six-dropdown\n          ref={(el) => (this.dropdownElement = el)}\n          hoist\n          skidding={0}\n          placement=\"bottom-end\"\n          onSix-dropdown-show={() => (this.active = true)}\n          onSix-dropdown-hide={() => (this.active = false)}\n        >\n          <slot slot=\"trigger\" name=\"trigger\" />\n          <slot />\n        </six-dropdown>\n      </Host>\n    );\n  }\n\n  private updateDropdownDistance() {\n    const trigger = getSlot(this.host, 'trigger');\n    const header = this.host.closest('six-header');\n    if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {\n      const hostRight = this.host.getBoundingClientRect().right;\n      const triggerRight = trigger.getBoundingClientRect().right;\n      const headerBottom = header.getBoundingClientRect().bottom;\n      const triggerBottom = trigger.getBoundingClientRect().bottom;\n      this.dropdownElement.distance = headerBottom - triggerBottom + 3;\n      this.dropdownElement.skidding = hostRight - triggerRight;\n    }\n  }\n}\n"],"version":3}
+{"file":"six-header-dropdown-item.js","mappings":";;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,2WAA2W;;MCa/XA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AALlC,IAAA,WAAA,GAAA;;;;AAME;;;;;AAKG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAiB,CAAA,iBAAA,GAAG,WAAW;AAE9B,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAkDxB;IA5CC,iBAAiB,GAAA;QACf,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,gBAAgB,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;;IAG/B,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,kCAAkC,EAAE,IAAI,CAAC,MAAM;aAChD,EAAA,EAED,CACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,EACxC,KAAK,EACL,IAAA,EAAA,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,YAAY,EACD,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAC1B,qBAAA,EAAA,OAAO,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAChD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAEzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAG,CAAA,EACtC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACK,CACV;;IAIH,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC9C,IAAI,OAAO,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE;YAC1F,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK;YACzD,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK;YAC1D,MAAM,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;YAC5D,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,GAAG,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,SAAS,GAAG,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderDropdownItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-dropdown-item/six-header-dropdown-item.scss?tag=six-header-dropdown-item&encapsulation=shadow","src/components/six-header-dropdown-item/six-header-dropdown-item.tsx"],"sourcesContent":[":host {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-dropdown-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-dropdown-item',\n  styleUrl: 'six-header-dropdown-item.scss',\n  shadow: true,\n})\nexport class SixHeaderDropdownItem {\n  /**\n   * Set to true to allow auto filtering for entries in the dropdown.\n   * With this flag the dropdown will automatically filter itsel.\n   * If you need to coordinate the shown elements yourself,\n   * e.g. because you need to call an endpoint use asyncFilter instead\n   */\n  @Prop() filter = false;\n\n  /** The filter's placeholder text. */\n  @Prop() filterPlaceholder = 'Filter...';\n\n  @State() active = false;\n\n  @Element() host!: HTMLSixHeaderDropdownItemElement;\n\n  private dropdownElement?: HTMLSixDropdownElement;\n\n  connectedCallback() {\n    this.updateDropdownDistance();\n  }\n\n  componentDidLoad() {\n    this.updateDropdownDistance();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'six-header-dropdown-item--active': this.active,\n        }}\n      >\n        <six-dropdown\n          ref={(el) => (this.dropdownElement = el)}\n          hoist\n          skidding={0}\n          placement=\"bottom-end\"\n          onSix-dropdown-show={() => (this.active = true)}\n          onSix-dropdown-hide={() => (this.active = false)}\n          filter={this.filter}\n          filterPlaceholder={this.filterPlaceholder}\n        >\n          <slot slot=\"trigger\" name=\"trigger\" />\n          <slot />\n        </six-dropdown>\n      </Host>\n    );\n  }\n\n  private updateDropdownDistance() {\n    const trigger = getSlot(this.host, 'trigger');\n    const header = this.host.closest('six-header');\n    if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {\n      const hostRight = this.host.getBoundingClientRect().right;\n      const triggerRight = trigger.getBoundingClientRect().right;\n      const headerBottom = header.getBoundingClientRect().bottom;\n      const triggerBottom = trigger.getBoundingClientRect().bottom;\n      this.dropdownElement.distance = headerBottom - triggerBottom + 3;\n      this.dropdownElement.skidding = hostRight - triggerRight;\n    }\n  }\n}\n"],"version":3}

package/dist/components/six-header-item.js

@@ -1,8 +1,46 @@
-import { S as SixHeaderItem$1, d as defineCustomElement$1 } from './six-header-item2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-BAe7gBEi.js';
+
+const sixHeaderItemCss = ":host{position:relative;isolation:isolate;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 var(--six-spacing-large);border-bottom:solid var(--six-header-border-height) transparent;border-top:solid var(--six-header-border-height) transparent}:host(.six-header-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+
+const SixHeaderItem$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Indicates whether the item is styled as active.
+         * When set to `true`, a border is displayed below the trigger element.
+         *
+         * Use <code>six-header-dropdown-item</code> to automatically set the active
+         * state for dropdowns.
+         */
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: '991e7169a78af91afdec9e0ddc665be3d71d7b3c', class: { 'six-header-item--active': this.active } }, h("slot", { key: 'f6e7bd092d9d8e63142bea487f618aebda7ad48a' })));
+    }
+    static get style() { return sixHeaderItemCss; }
+}, [1, "six-header-item", {
+        "active": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-header-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-header-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixHeaderItem$1);
+            }
+            break;
+    } });
+}
 
 const SixHeaderItem = SixHeaderItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeaderItem, defineCustomElement };
+//# sourceMappingURL=six-header-item.js.map
 
 //# sourceMappingURL=six-header-item.js.map

package/dist/components/six-header-item.js.map

@@ -1 +1 @@
-{"file":"six-header-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"six-header-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sYAAsY;;MCYlZA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAME;;;;;;AAMG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AASxC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EACrD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-item/six-header-item.scss?tag=six-header-item&encapsulation=shadow","src/components/six-header-item/six-header-item.tsx"],"sourcesContent":[":host {\n  position: relative;\n  isolation: isolate;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 0 var(--six-spacing-large);\n  border-bottom: solid var(--six-header-border-height) transparent;\n  border-top: solid var(--six-header-border-height) transparent;\n}\n\n:host(.six-header-item--active) {\n  border-bottom: solid var(--six-header-border-height) var(--six-header-border-color-open);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-item',\n  styleUrl: 'six-header-item.scss',\n  shadow: true,\n})\nexport class SixHeaderItem {\n  /**\n   * Indicates whether the item is styled as active.\n   * When set to `true`, a border is displayed below the trigger element.\n   *\n   * Use <code>six-header-dropdown-item</code> to automatically set the active\n   * state for dropdowns.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host class={{ 'six-header-item--active': this.active }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-header-menu-button.js

@@ -1,30 +1,41 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './six-button2.js';
-import { d as defineCustomElement$3 } from './six-icon2.js';
-import { d as defineCustomElement$2 } from './six-spinner2.js';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$3 } from './p-Bg0uWW5a.js';
+import { d as defineCustomElement$2 } from './p-Dgi7xz4X.js';
 
-const sixHeaderMenuButtonCss = ":host{display:block}six-button::part(base){border:none;padding-right:0}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";
-const SixHeaderMenuButtonStyle0 = sixHeaderMenuButtonCss;
+const sixHeaderMenuButtonCss = ":host{display:block}six-button::part(base){border:none;padding-right:0}six-button[disabled]::part(base){color:var(--six-color-web-rock-600);background-color:transparent}six-button::part(label){border:none;font-weight:var(--six-font-weight-bold);font-size:var(--six-font-size-small);padding-left:0}six-button:focus::part(base),six-button:hover::part(base),six-button:active::part(base){background-color:initial;border-color:initial}six-button:hover::part(base),six-button:active::part(base){color:var(--six-header-selected-app-color-hover)}";
 
-const SixHeaderMenuButton$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderMenuButton extends HTMLElement {
+const SixHeaderMenuButton$1 = /*@__PURE__*/ proxyCustomElement(class SixHeaderMenuButton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.icon = '';
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+        this.caret = false;
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
+        this.loading = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+        this.submit = false;
+        /** Indicates if activating the button should reset the form. */
+        this.reset = false;
     }
     render() {
-        return (h("six-button", { key: 'a90b8172714045d7d6a4dfac4d1c2755d6ec5090', type: "secondary" }, h("span", { key: '4aa77d118aa8d2b634327e9b62d8e17ee3742e87', slot: "suffix" }, h("six-icon", { key: 'dc64461f222af85ed126c307a94cd2f4f3020eac' }, this.icon)), h("slot", { key: 'a611c0d9090a039f682350240c07aa77fb76ebad' })));
+        return (h("six-button", { key: '0e49fce5af4f896cf6bc921535b4d6c9c9099135', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: 'd25b06f7eaecb9543b90ec1e431b851e31696ed5', name: "suffix", slot: "suffix" }), h("slot", { key: '71e3403e71239885fbebf529cdfa8bf597c45912', name: "prefix", slot: "prefix" }), h("slot", { key: '4c94d3c70fb10ba34999f72ccb4f0196ff5f0186' })));
     }
-    static get style() { return SixHeaderMenuButtonStyle0; }
+    static get style() { return sixHeaderMenuButtonCss; }
 }, [1, "six-header-menu-button", {
-        "icon": [513]
+        "caret": [4],
+        "disabled": [516],
+        "loading": [516],
+        "submit": [516],
+        "reset": [516]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["six-header-menu-button", "six-button", "six-icon", "six-spinner"];
+    const components = ["six-header-menu-button", "six-button", "six-spinner"];
     components.forEach(tagName => { switch (tagName) {
         case "six-header-menu-button":
             if (!customElements.get(tagName)) {
@@ -32,11 +43,6 @@ function defineCustomElement$1() {
             }
             break;
         case "six-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "six-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
@@ -53,5 +59,6 @@ const SixHeaderMenuButton = SixHeaderMenuButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeaderMenuButton, defineCustomElement };
+//# sourceMappingURL=six-header-menu-button.js.map
 
 //# sourceMappingURL=six-header-menu-button.js.map

package/dist/components/six-header-menu-button.js.map

@@ -1 +1 @@
-{"file":"six-header-menu-button.js","mappings":";;;;;AAAA,MAAM,sBAAsB,GAAG,2bAA2b,CAAC;AAC3d,kCAAe,sBAAsB;;MCWxBA,qBAAmB;;;;;oBAIE,EAAE;;IAElC,MAAM;QACJ,QACE,mEAAY,IAAI,EAAC,WAAW,IAC1B,6DAAM,IAAI,EAAC,QAAQ,IACjB,mEAAW,IAAI,CAAC,IAAI,CAAY,CAC3B,EACP,8DAAQ,CACG,EACb;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderMenuButton"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status beta\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /**\n   * The icon of the menu button.\n   */\n  @Prop({ reflect: true }) icon = '';\n\n  render() {\n    return (\n      <six-button type=\"secondary\">\n        <span slot=\"suffix\">\n          <six-icon>{this.icon}</six-icon>\n        </span>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-header-menu-button.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB;;MCY/iBA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;;AAGI,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;;AAGf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;;AAGd,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAkBvC;IAhBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeaderMenuButton","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header-menu-button/six-header-menu-button.scss?tag=six-header-menu-button&encapsulation=shadow","src/components/six-header-menu-button/six-header-menu-button.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\nsix-button::part(base) {\n  border: none;\n  padding-right: 0;\n}\n\nsix-button[disabled]::part(base) {\n  color: var(--six-color-web-rock-600);\n  background-color: transparent;\n}\n\nsix-button::part(label) {\n  border: none;\n  font-weight: var(--six-font-weight-bold);\n  font-size: var(--six-font-size-small);\n  padding-left: 0;\n}\n\nsix-button:focus::part(base),\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  background-color: initial;\n  border-color: initial;\n}\n\nsix-button:hover::part(base),\nsix-button:active::part(base) {\n  color: var(--six-header-selected-app-color-hover);\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 4.2.7\n * @status stable\n */\n\n@Component({\n  tag: 'six-header-menu-button',\n  styleUrl: 'six-header-menu-button.scss',\n  shadow: true,\n})\nexport class SixHeaderMenuButton {\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  render() {\n    return (\n      <six-button\n        type=\"secondary\"\n        caret={this.caret}\n        disabled={this.disabled}\n        loading={this.loading}\n        submit={this.submit}\n        reset={this.reset}\n      >\n        <slot name=\"suffix\" slot=\"suffix\"></slot>\n        <slot name=\"prefix\" slot=\"prefix\"></slot>\n        <slot />\n      </six-button>\n    );\n  }\n}\n"],"version":3}