@six-group/ui-library 0.0.0-insider.777a428 → 0.0.0-insider.77a508a

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

@@ -20,17 +20,22 @@ export class SixGroupLabel {
         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();
@@ -47,7 +52,7 @@ export class SixGroupLabel {
         (_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: '2bdb482e336b09325fe0bfc30cd3082846cbce6a', 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: 'cd79f08e30f7059290c81d83bb00e5b9f68a1181' })));
     }
     static get is() { return "six-group-label"; }
     static get encapsulation() { return "shadow"; }
@@ -77,6 +82,8 @@ export class SixGroupLabel {
                     "tags": [],
                     "text": "The label's size."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -95,6 +102,8 @@ export class SixGroupLabel {
                     "tags": [],
                     "text": "The wrapper label's label. Alternatively, you can use the label slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -113,6 +122,8 @@ export class SixGroupLabel {
                     "tags": [],
                     "text": "The wrapper label's help text. Alternatively, you can use the help-text slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -131,6 +142,8 @@ export class SixGroupLabel {
                     "tags": [],
                     "text": "Set to true to disable the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -149,6 +162,8 @@ export class SixGroupLabel {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;;QAChB,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAwCrC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;+BAvCyB,KAAK;4BACR,KAAK;oBAGiC,QAAQ;qBAGtD,EAAE;wBAGC,EAAE;wBAGe,KAAK;wBAGtB,KAAK;;IAIxB,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjF,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,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;YAEvB,eAAa,CACD,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-group-label.js","sourceRoot":"","sources":["../../../src/components/six-group-label/six-group-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAMU,mBAAc,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QACjC,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QAIpC,oBAAe,GAAG,KAAK,CAAC;QACxB,iBAAY,GAAG,KAAK,CAAC;QAE9B,wBAAwB;QACC,SAAI,GAAiC,QAAQ,CAAC;QAEvE,4EAA4E;QACpE,UAAK,GAAG,EAAE,CAAC;QAEnB,oFAAoF;QAC5E,aAAQ,GAAG,EAAE,CAAC;QAEtB,wCAAwC;QACf,aAAQ,GAAG,KAAK,CAAC;QAE1C,yDAAyD;QACjD,aAAQ,GAAG,KAAK,CAAC;QAoBjB,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;KAoBH;IAvCC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjF,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,qDACV,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,8DAAa,CACD,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\n\nlet id = 0;\n\n/**\n * @since 1.1\n * @status stable\n *\n * @slot label - The wrapped component's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The label of wrapped component.\n * @part help-text - The help text of the wrapped component.\n */\n@Component({\n  tag: 'six-group-label',\n  styleUrl: 'six-group-label.scss',\n  shadow: true,\n})\nexport class SixGroupLabel {\n  private wrapperLabelId = `label-${++id}`;\n  private labelId = `label-label-${id}`;\n  private helpTextId = `label-help-text-${id}`;\n\n  @Element() host!: HTMLSixGroupLabelElement;\n\n  @State() hasHelpTextSlot = false;\n  @State() hasLabelSlot = false;\n\n  /** The label's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The wrapper label's label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The wrapper label's help text. Alternatively, you can use the help-text slot. */\n  @Prop() helpText = '';\n\n  /** Set to true to disable the label. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  @Watch('helpText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n  };\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.wrapperLabelId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        helpTextId={this.helpTextId}\n        helpText={this.helpText}\n        hasHelpTextSlot={this.hasHelpTextSlot}\n        size={this.size}\n        disabled={this.disabled}\n        required={this.required}\n      >\n        <slot></slot>\n      </FormControl>\n    );\n  }\n}\n"]}

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

@@ -6,6 +6,17 @@
   box-sizing: border-box;
 }
 
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 :host {
   display: block;
   user-select: none;
@@ -21,47 +32,12 @@
 .six-header {
   display: flex;
   width: 100%;
-  height: 3.75rem;
+  height: var(--six-header-height);
   background-color: var(--six-header-background-color);
-  align-items: center;
-  flex-wrap: wrap;
+  align-items: stretch;
   box-shadow: var(--six-shadow-medium);
   border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);
 }
-.six-header__logo {
-  width: 6rem;
-  margin-top: 0.15rem;
-}
-.six-header__logo--clickable {
-  cursor: pointer;
-}
-.six-header__placeholder {
-  flex: 1;
-}
-.six-header__menu, .six-header__logo, .six-header__custom, .six-header__search, .six-header__notification, .six-header__app-switcher, .six-header__profile {
-  height: calc(100% - 0.25rem - 1px);
-  padding: 0 1.25rem;
-  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);

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

@@ -1,185 +1,38 @@
 import { h, Host } from "@stencil/core";
 import { EventListeners } from "../../utils/event-listeners";
-import { getSlot, hasSlot } from "../../utils/slot";
-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 = {}));
+import { getSlot } from "../../utils/slot";
 /**
  * @since 1.0
  * @status stable
- *
- * @slot - Used to define a custom component that is included in the header.
  * @slot search-field - Used to define the search field component in the header.
- * @slot notifications - Used to define the notification component in the header.
- * @slot app-switcher-menu - Used to define the application switcher menu in the header.
- * @slot profile-menu - Used to define the profile menu in the header.
- * @slot profile-avatar - Used to define the avator in the header.
  */
 export class SixHeader {
     constructor() {
-        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;
-        };
+        /** Indicates if content should be shifted down when search field is visible. */
         this.shiftContent = false;
-        this.hideHamburgerMenu = false;
-        this.openHamburgerMenu = false;
+        /**
+         * Set the header search input to be in an open or closed state.
+         *
+         * Focuses the first `six-input` found in the search slot.
+         */
         this.openSearch = false;
-        this.clickableLogo = false;
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
+        this.eventListeners = new EventListeners();
     }
     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: {
+        return (h(Host, { key: '3c03ee28b12600576e0b714e5077ea2c800a4c65' }, h("header", { key: '8d3807cb3b05ca07cce629bf1dcdbdb49a6d400a', part: "header", class: "six-header" }, h("slot", { key: '7a920fedf946e99c4d7a538706e8061e165a0015' })), h("div", { key: 'c884119828755832b8312412647b8ff89fae5a88', 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: '42d1ab374144bc3da2b1cd144e3328c64ee75204', name: 'search-field' }))));
     }
     static get is() { return "six-header"; }
     static get encapsulation() { return "shadow"; }
@@ -210,46 +63,12 @@ export class SixHeader {
                     "tags": [],
                     "text": "Indicates if content should be shifted down when search field is visible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shift-content",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hideHamburgerMenu": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set whether the hamburger menu should be visible or not"
-                },
-                "attribute": "hide-hamburger-menu",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "openHamburgerMenu": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the hamburger menu icon to open or closed state"
-                },
-                "attribute": "open-hamburger-menu",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "openSearch": {
                 "type": "boolean",
                 "mutable": false,
@@ -262,206 +81,13 @@ export class SixHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the header search to be in an open or closed state"
+                    "text": "Set the header search input to be in an open or closed state.\n\nFocuses the first `six-input` found in the search slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open-search",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "clickableLogo": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set whether the logo should be clickable"
-                },
-                "attribute": "clickable-logo",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "selectedApp": {},
-            "selectedSection": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "sixAppNameClicked",
-                "name": "six-header-app-name-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the name of the selected app is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixAppSwitcherSelect",
-                "name": "six-header-app-switcher-select",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a menu item is in the app switcher menu is selected."
-                },
-                "complexType": {
-                    "original": "SixHeaderAppSwitcherSelectPayload",
-                    "resolved": "SixHeaderAppSwitcherSelectPayload",
-                    "references": {
-                        "SixHeaderAppSwitcherSelectPayload": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderAppSwitcherSelectPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixProfileSelect",
-                "name": "six-header-profile-select",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a menu item is in the profile menu is selected."
-                },
-                "complexType": {
-                    "original": "SixHeaderProfileSelectPayload",
-                    "resolved": "SixHeaderProfileSelectPayload",
-                    "references": {
-                        "SixHeaderProfileSelectPayload": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderProfileSelectPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixHamburgerClick",
-                "name": "six-header-hamburger-menu-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the hamburger menu is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixLogoClick",
-                "name": "six-header-logo-clicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the header logo is clicked."
-                },
-                "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
-                    "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
-                        }
-                    }
-                }
-            }, {
-                "method": "sixSearchFieldToggle",
-                "name": "six-header-search-field-toggle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when search field is toggled."
-                },
-                "complexType": {
-                    "original": "SixHeaderSearchFieldToggle",
-                    "resolved": "SixHeaderSearchFieldToggle",
-                    "references": {
-                        "SixHeaderSearchFieldToggle": {
-                            "location": "local",
-                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-header/six-header.tsx",
-                            "id": "src/components/six-header/six-header.tsx::SixHeaderSearchFieldToggle"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "setSearchOpenState": {
-                "complexType": {
-                    "signature": "(openState: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "openState",
-                            "type": "boolean",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets open state for search",
-                    "tags": []
-                }
-            },
-            "getIsSearchOpen": {
-                "complexType": {
-                    "signature": "() => Promise<boolean>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<boolean>"
-                },
-                "docs": {
-                    "text": "Get open state for search",
-                    "tags": []
-                }
             }
         };
     }