@six-group/ui-library 0.0.0-insider.bb295d8 → 0.0.0-insider.bea5ab5

package/dist/esm/six-file-upload.entry.js

@@ -1,14 +1,25 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6c10d50b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
+import { h as hasSlot } from './slot-56531341.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--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)}.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}";
+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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.success = createEvent(this, "six-file-upload-success", 7);
         this.failure = createEvent(this, "six-file-upload-failure", 7);
+        this.handleSlotChange = () => {
+            let validType = false;
+            if (this.errorText != null &&
+                ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) ||
+                    (typeof this.errorText == 'object' && this.errorText.length > 0))) {
+                validType = true;
+            }
+            this.hasError = validType || hasSlot(this.host, 'error-text');
+        };
         this.handleFiles = (files) => {
-            if (this.disabled || files.length === 0) {
+            if (this.disabled || files.length === 0 || this.uploading) {
                 return;
             }
             if (!this.multiple && files.length > 1) {
@@ -43,12 +54,16 @@ const SixFileUpload = class {
             }
         };
         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) {
@@ -65,25 +80,29 @@ const SixFileUpload = class {
             this.isOver = false;
         }
     }
-    dropHandler({ dataTransfer }) {
+    dropHandler() {
         if (!this.disabled) {
             this.isOver = false;
-            if (dataTransfer != null) {
-                this.handleFiles(dataTransfer.files);
-            }
         }
     }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
     componentDidLoad() {
+        var _a;
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
             this.host.addEventListener(eventName, this.preventDefaults, false);
             document.body.addEventListener(eventName, this.preventDefaults, false);
         });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
     }
     disconnectedCallback() {
+        var _a;
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
             this.host.removeEventListener(eventName, this.preventDefaults, false);
             document.body.removeEventListener(eventName, this.preventDefaults, false);
         });
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     preventDefaults(e) {
         e.preventDefault();
@@ -95,21 +114,22 @@ const SixFileUpload = class {
     }
     render() {
         const Container = this.compact ? 'six-button' : 'six-card';
-        return (h("div", { class: {
+        const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
+        return (h("div", { key: '273eaa495b7158f3caba301a3efa49918ee44e2b', class: {
                 'six-file-upload': true,
-                'six-file-upload--disabled': this.disabled,
-            } }, h(Container, { class: {
+                'six-file-upload--disabled': this.disabled || this.uploading,
+            } }, h(Container, { key: '6f230b253610a589d7ef1ce8d38ec5db724c129a', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
                 'six-file-upload__container--compact': this.compact,
                 'six-file-upload__container--full': !this.compact,
-            } }, this.compact && (h("span", { slot: "prefix" }, h("six-icon", { class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { class: {
+            } }, this.compact && !this.uploading && (h("span", { key: 'b1f5604ddacd8ec9b996e4de2f91b8afc48757b4', slot: "prefix" }, h("six-icon", { key: 'fd364b1912a31f703c8e8db887eb83ff53998e46', class: "six-file-upload__label-icon" }, "arrow_circle_up"))), h("div", { key: '4f26acba5da00bea31b8f7d87073e839058a86ec', class: {
                 'six-file-upload__drop-zone': true,
                 'six-file-upload__drop-zone--hover': this.isOver,
                 'six-file-upload__drop-zone--compact': this.compact,
-            } }, 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) })))));
+            } }, 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 getElement(this); }
 };
-SixFileUpload.style = sixFileUploadCss;
+SixFileUpload.style = SixFileUploadStyle0;
 
 export { SixFileUpload as six_file_upload };
 

package/dist/esm/six-file-upload.entry.js.map

@@ -1 +1 @@
-{"file":"six-file-upload.entry.js","mappings":"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","names":[],"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    &--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  }\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","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.entry.js","mappings":"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","names":[],"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/esm/six-footer.entry.js

@@ -1,16 +1,17 @@
-import { r as registerInstance, h } from './index-6c10d50b.js';
+import { r as registerInstance, h } from './index-a7bee415.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("footer", { class: "six-footer" }, h("slot", null)));
+        return (h("footer", { key: 'be31134b91e323b0fdd39eec797a379fff376f52', class: "six-footer" }, h("slot", { key: '8d1ca2429473adbd0b7ca48ba6daf537eae83c8b' })));
     }
 };
-SixFooter.style = sixFooterCss;
+SixFooter.style = SixFooterStyle0;
 
 export { SixFooter as six_footer };
 

package/dist/esm/six-footer.entry.js.map

@@ -1 +1 @@
-{"file":"six-footer.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6UAA6U;;MCcrV,SAAS;;;;IACpB,MAAM;QACJ,QACE,cAAQ,KAAK,EAAC,YAAY,IACxB,eAAQ,CACD,EACT;KACH;;;;;;","names":[],"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.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6UAA6U,CAAC;AACnW,wBAAe,YAAY;;MCad,SAAS;;;;IACpB,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAC,YAAY,IACxB,8DAAQ,CACD,EACT;KACH;;;;;;","names":[],"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/esm/six-group-label.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-6c10d50b.js';
-import { F as FormControl } from './form-control-77fcccd0.js';
+import { r as registerInstance, h, g as getElement } from './index-a7bee415.js';
+import { F as FormControl } from './form-control-ad1710bf.js';
 import { h as hasSlot } from './slot-56531341.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 = class {
@@ -38,7 +39,7 @@ const SixGroupLabel = class {
         (_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)));
+        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 getElement(this); }
     static get watchers() { return {
@@ -46,7 +47,7 @@ const SixGroupLabel = class {
         "label": ["handleLabelChange"]
     }; }
 };
-SixGroupLabel.style = sixGroupLabelCss;
+SixGroupLabel.style = SixGroupLabelStyle0;
 
 export { SixGroupLabel as six_group_label };
 

package/dist/esm/six-group-label.entry.js.map

@@ -1 +1 @@
-{"file":"six-group-label.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,y/EAAy/E;;ACIlhF,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBE,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;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,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,IAEvB,eAAa,CACD,EACd;KACH;;;;;;;;;;;","names":[],"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.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,y/EAAy/E,CAAC;AACnhF,4BAAe,gBAAgB;;ACG/B,IAAI,EAAE,GAAG,CAAC,CAAC;MAoBE,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;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":[],"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/esm/six-header-dropdown-item.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7bee415.js';
+import { g as getSlot } from './slot-56531341.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}:host(.six-header-dropdown-item--active){border-bottom:solid var(--six-header-border-height) var(--six-header-border-color-open)}";
+const SixHeaderDropdownItemStyle0 = sixHeaderDropdownItemCss;
+
+const SixHeaderDropdownItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.filter = false;
+        this.filterPlaceholder = 'Filter...';
+        this.active = false;
+    }
+    connectedCallback() {
+        this.updateDropdownDistance();
+    }
+    componentDidLoad() {
+        this.updateDropdownDistance();
+    }
+    render() {
+        return (h(Host, { key: '38587d2dbad8464c9e50b50916d0a6ba2f091f29', class: {
+                'six-header-dropdown-item--active': this.active,
+            } }, 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');
+        const header = this.host.closest('six-header');
+        if (trigger != null && header != null && this.dropdownElement != null && this.host != null) {
+            const hostRight = this.host.getBoundingClientRect().right;
+            const triggerRight = trigger.getBoundingClientRect().right;
+            const headerBottom = header.getBoundingClientRect().bottom;
+            const triggerBottom = trigger.getBoundingClientRect().bottom;
+            this.dropdownElement.distance = headerBottom - triggerBottom + 3;
+            this.dropdownElement.skidding = hostRight - triggerRight;
+        }
+    }
+    get host() { return getElement(this); }
+};
+SixHeaderDropdownItem.style = SixHeaderDropdownItemStyle0;
+
+export { SixHeaderDropdownItem as six_header_dropdown_item };
+
+//# sourceMappingURL=six-header-dropdown-item.entry.js.map

package/dist/esm/six-header-dropdown-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-header-dropdown-item.entry.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,2WAA2W,CAAC;AAC7Y,oCAAe,wBAAwB;;MCY1B,qBAAqB;;;sBAOf,KAAK;iCAGM,WAAW;sBAErB,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,EAChD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,IAEzC,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":[],"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/esm/six-header-item.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-a7bee415.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 SixHeaderItemStyle0 = sixHeaderItemCss;
+
+const SixHeaderItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.active = false;
+    }
+    render() {
+        return (h(Host, { key: '991e7169a78af91afdec9e0ddc665be3d71d7b3c', class: { 'six-header-item--active': this.active } }, h("slot", { key: 'f6e7bd092d9d8e63142bea487f618aebda7ad48a' })));
+    }
+};
+SixHeaderItem.style = SixHeaderItemStyle0;
+
+export { SixHeaderItem as six_header_item };
+
+//# sourceMappingURL=six-header-item.entry.js.map

package/dist/esm/six-header-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-header-item.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sYAAsY,CAAC;AACha,4BAAe,gBAAgB;;MCWlB,aAAa;;;sBAQU,KAAK;;IAEvC,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,IACrD,8DAAQ,CACH,EACP;KACH;;;;;;","names":[],"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/esm/six-header-menu-button.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-a7bee415.js';
+
+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 SixHeaderMenuButtonStyle0 = sixHeaderMenuButtonCss;
+
+const SixHeaderMenuButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.caret = false;
+        this.disabled = false;
+        this.loading = false;
+        this.submit = false;
+        this.reset = false;
+    }
+    render() {
+        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' })));
+    }
+};
+SixHeaderMenuButton.style = SixHeaderMenuButtonStyle0;
+
+export { SixHeaderMenuButton as six_header_menu_button };
+
+//# sourceMappingURL=six-header-menu-button.entry.js.map

package/dist/esm/six-header-menu-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-header-menu-button.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,6hBAA6hB,CAAC;AAC7jB,kCAAe,sBAAsB;;MCWxB,mBAAmB;;;qBAEd,KAAK;wBAGe,KAAK;uBAGN,KAAK;sBAGN,KAAK;qBAGN,KAAK;;IAEtC,MAAM;QACJ,QACE,mEACE,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,IAEjB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzC,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,EACzC,8DAAQ,CACG,EACb;KACH;;;;;;","names":[],"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}

package/dist/esm/six-header.entry.js

@@ -1,184 +1,33 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6c10d50b.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a7bee415.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
-import { g as getSlot, h as hasSlot } from './slot-56531341.js';
+import { g as getSlot } from './slot-56531341.js';
 
-const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:3.75rem;background-color:var(--six-header-background-color);align-items:center;flex-wrap:wrap;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;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__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:0.9rem;font-weight:600;padding-right:0;padding-left:0.3rem}.six-header__selected-app:hover{color:var(--six-header-selected-app-color-hover)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;user-select:none;--search-border-width:1px}::slotted(six-search-field){position:absolute;margin-left:var(--search-border-width);width:calc(100% - 2 * var(--search-border-width))}.six-header{display:flex;width:100%;height:var(--six-header-height);background-color:var(--six-header-background-color);align-items:stretch;box-shadow:var(--six-shadow-medium);border-bottom:var(--six-header-border-with) solid var(--six-header-border-color)}.six-header__search-field{opacity:0;transform:scale(0.9);transition:var(--six-transition-fast) opacity, var(--six-transition-fast) transform;display:none}.six-header__search-field--visible{opacity:1;transform:none;display:block}.six-header__search-field--shift-content.six-header__search-field--visible{height:2.65rem;transition:var(--six-transition-fast) height}.six-header__search-field--shift-content:not(.six-header__search-field--visible){height:0;transition:var(--six-transition-fast) height}";
+const SixHeaderStyle0 = sixHeaderCss;
 
-var Section;
-(function (Section) {
-    Section[Section["None"] = 0] = "None";
-    Section[Section["Search"] = 1] = "Search";
-    Section[Section["AppSwitcher"] = 2] = "AppSwitcher";
-    Section[Section["Profile"] = 3] = "Profile";
-})(Section || (Section = {}));
-var Slot;
-(function (Slot) {
-    Slot["Search"] = "search-field";
-    Slot["Notifications"] = "notifications";
-    Slot["AppSwitcher"] = "app-switcher-menu";
-    Slot["Profile"] = "profile-menu";
-    Slot["Logo"] = "logo";
-})(Slot || (Slot = {}));
 const SixHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sixAppNameClicked = createEvent(this, "six-header-app-name-clicked", 7);
-        this.sixAppSwitcherSelect = createEvent(this, "six-header-app-switcher-select", 7);
-        this.sixProfileSelect = createEvent(this, "six-header-profile-select", 7);
-        this.sixHamburgerClick = createEvent(this, "six-header-hamburger-menu-clicked", 7);
-        this.sixLogoClick = createEvent(this, "six-header-logo-clicked", 7);
-        this.sixSearchFieldToggle = createEvent(this, "six-header-search-field-toggle", 7);
         this.eventListeners = new EventListeners();
-        this.setupMenu = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());
-        };
-        this.setupLogo = (el) => {
-            if (!this.clickableLogo || el == null)
-                return;
-            this.eventListeners.add(el, 'click', () => this.sixLogoClick.emit());
-        };
-        this.setupProfile = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.setupAppSwitcher = (el) => {
-            if (el == null)
-                return;
-            this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));
-            this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));
-            this.eventListeners.add(el, 'six-menu-item-selected', (event) => {
-                const { name, item } = event.detail;
-                this.selectedApp = item.innerText;
-                this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });
-            });
-        };
-        this.appNameClicked = () => this.sixAppNameClicked.emit();
-        this.computeSearchOpenState = () => {
-            this.selectedSection = this.openSearch ? Section.Search : Section.None;
-        };
         this.shiftContent = false;
-        this.hideHamburgerMenu = false;
-        this.openHamburgerMenu = false;
         this.openSearch = false;
-        this.clickableLogo = false;
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
     }
     handleOpenSearchChange() {
-        this.computeSearchOpenState();
-    }
-    /** Sets open state for search */
-    async setSearchOpenState(openState) {
-        if (this.selectedSection === Section.Search && !openState) {
-            this.selectedSection = Section.None;
-        }
-        else if (openState && this.selectedSection !== Section.Search) {
-            this.selectedSection = Section.Search;
-        }
-    }
-    /** Get open state for search */
-    async getIsSearchOpen() {
-        return this.selectedSection === Section.Search;
-    }
-    hasSlot(slot) {
-        if (this.slots == null) {
-            return false;
-        }
-        return this.slots[slot];
-    }
-    isSectionSelected(value) {
-        return value === this.selectedSection;
-    }
-    selectSection(section) {
-        return () => (this.selectedSection = section);
-    }
-    toggleSearch() {
-        const visible = this.selectedSection !== Section.Search;
-        this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;
-        this.sixSearchFieldToggle.emit({ visible });
-        if (this.selectedSection === Section.Search) {
-            // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772
-            setTimeout(async () => {
-                var _a, _b;
-                const slot = getSlot(this.host, Slot.Search);
-                (_b = (_a = slot === null || slot === void 0 ? void 0 : slot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.setFocus();
-            }, 50);
-        }
-    }
-    componentWillLoad() {
-        this.slots = {
-            [Slot.Search]: hasSlot(this.host, Slot.Search),
-            [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),
-            [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),
-            [Slot.Profile]: hasSlot(this.host, Slot.Profile),
-            [Slot.Logo]: hasSlot(this.host, Slot.Logo),
-        };
-        if (this.hasSlot(Slot.AppSwitcher)) {
-            this.updateSelectedApp();
-        }
-        if (this.hasSlot(Slot.Search)) {
-            this.computeSearchOpenState();
-        }
-    }
-    connectedCallback() {
-        const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);
-        if (appSwitcherSlot) {
-            this.mutationObserver = new MutationObserver((mutations) => {
-                if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {
-                    this.updateSelectedApp();
-                }
-            });
-            this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });
-        }
-    }
-    updateSelectedApp() {
-        var _a;
-        // there are more concise ways to select the first checked menu item, but this is one that works for jest
-        const element = getSlot(this.host, Slot.AppSwitcher);
-        if (element == null) {
-            return undefined;
+        if (this.openSearch) {
+            // deferred due to https://github.com/ionic-team/stencil/issues/3772
+            setTimeout(async () => { var _a, _b, _c; return (_c = (_b = (_a = getSlot(this.host, 'search-field')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('six-input')) === null || _c === void 0 ? void 0 : _c.setFocus(); }, 50);
         }
-        const items = Array.from(element.querySelectorAll('six-menu-item'));
-        const firstCheckedMenuItem = items.find((item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false');
-        this.selectedApp = (_a = firstCheckedMenuItem === null || firstCheckedMenuItem === void 0 ? void 0 : firstCheckedMenuItem.textContent) !== null && _a !== void 0 ? _a : undefined;
     }
     disconnectedCallback() {
-        var _a;
         this.eventListeners.removeAll();
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        const hamburgerMenu = !this.hideHamburgerMenu && (h("section", { class: "six-header__menu" }, h("six-icon-button", { name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
-        const search = this.hasSlot(Slot.Search) && (h("section", { class: {
-                'six-header__search': true,
-                'six-header__search--open': this.isSectionSelected(Section.Search),
-            } }, h("six-icon-button", { name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("section", { class: "six-header__notification" }, h("slot", { name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("section", { class: {
-                'six-header__app-switcher': true,
-                'six-header__app-switcher--open': this.isSectionSelected(Section.AppSwitcher),
-            } }, h("six-dropdown", { distance: 13, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { name: "apps" })), h("slot", { name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("section", { class: {
-                'six-header__profile': true,
-                'six-header__profile--open': this.isSectionSelected(Section.Profile),
-            } }, h("six-dropdown", { distance: 17, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { name: "profile-avatar", slot: "trigger" }), h("slot", { name: "profile-menu" }))));
-        const logo = this.hasSlot(Slot.Logo) ? (h("section", null, h("slot", { name: "logo" }))) : (h("section", { class: {
-                'six-header__logo': true,
-                'six-header__logo--clickable': this.clickableLogo,
-            }, ref: this.setupLogo }, h("svg", { height: "20", viewBox: "0 0 90 26", xmlns: "http://www.w3.org/2000/svg" }, h("title", null, "SIX"), h("g", { fill: "#DE3919", "fill-rule": "nonzero" }, h("path", { d: "m22.798 3.869c1.82-2.168 4.549-3.545 7.6-3.545h6.807v4.961h-6.807c-1.526 0-2.89.689-3.8 1.771l-12.19 14.526c-1.82 2.166-4.549 3.545-7.6 3.545h-6.808v-4.961h6.808c1.525 0 2.889-.689 3.799-1.773l12.191-14.525" }), h("path", { d: "m42.16.324h5.21v24.806h-5.21z" }), h("path", { d: "m66.743 3.869l4.195 4.999 4.195-4.999c1.819-2.168 4.549-3.545 7.6-3.545h6.806v4.961h-6.806c-1.526 0-2.89.689-3.8 1.771l-4.758 5.669 4.758 5.669c.91 1.084 2.274 1.773 3.8 1.773h6.806v4.961h-6.806c-3.051 0-5.781-1.379-7.6-3.545l-4.195-4.999-4.195 4.999c-1.82 2.166-4.55 3.545-7.6 3.545h-6.807v-4.961h6.807c1.525 0 2.889-.689 3.799-1.773l4.758-5.669-4.758-5.669c-.91-1.083-2.274-1.771-3.799-1.771h-6.807v-4.961h6.807c3.05 0 5.78 1.378 7.6 3.545" })))));
-        return (h(Host, null, h("header", { class: "six-header" }, hamburgerMenu, logo, h("section", { class: "six-header__placeholder" }), h("section", { class: "six-header__custom" }, h("slot", null)), search, notifications, appSwitcher, profile), h("div", { class: {
+        console.log('render', this.openSearch);
+        return (h(Host, { key: '52af99894d875dcaab9e43584e3f85a032ee5297' }, h("header", { key: '0de37377a1ec6137940c9dc06d6db2be650473c4', part: "header", class: "six-header" }, h("slot", { key: '5a236e823be39bbf26073ac7ff5413ef09c25bda' })), h("div", { key: '77182a4e207a72ba9400a2d13d3cfddfdb98668c', class: {
                 'six-header__search-field': true,
-                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
+                'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { name: Slot.Search }))));
+            } }, h("slot", { key: '27cfb931af55b164761a22c11c320874ddac3e3a', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return getElement(this); }
@@ -186,7 +35,7 @@ const SixHeader = class {
         "openSearch": ["handleOpenSearchChange"]
     }; }
 };
-SixHeader.style = sixHeaderCss;
+SixHeader.style = SixHeaderStyle0;
 
 export { SixHeader as six_header };