@six-group/ui-library 4.3.3 → 5.0.0-rc.1

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

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

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

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

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

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

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

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

package/dist/components/six-header.js

@@ -1,232 +1,49 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { E as EventListeners } from './event-listeners.js';
-import { g as getSlot, h as hasSlot } from './slot.js';
-import { d as defineCustomElement$b } from './six-checkbox2.js';
-import { d as defineCustomElement$a } from './six-dropdown2.js';
-import { d as defineCustomElement$9 } from './six-error2.js';
-import { d as defineCustomElement$8 } from './six-header-item2.js';
-import { d as defineCustomElement$7 } from './six-icon2.js';
-import { d as defineCustomElement$6 } from './six-icon-button2.js';
-import { d as defineCustomElement$5 } from './six-input2.js';
-import { d as defineCustomElement$4 } from './six-logo2.js';
-import { d as defineCustomElement$3 } from './six-menu2.js';
-import { d as defineCustomElement$2 } from './six-menu-item2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D512q9rn.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { g as getSlot } from './p-j3oIB5oT.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: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__logo--clickable{cursor:pointer}.six-header__placeholder{flex:1}.six-header__app-switcher-dropdown{display:flex;align-items:center}.six-header__selected-app{cursor:pointer;font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-bold);padding-right:0;padding-left:var(--six-spacing-x-small)}.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 SixHeaderStyle0 = sixHeaderCss;
+const sixHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.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;--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}";
 
-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$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends HTMLElement {
+const SixHeader$1 = /*@__PURE__*/ proxyCustomElement(class SixHeader extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        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.logoClick = 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.logoClick.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.custom = false;
+        /** 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.logo = 'six';
-        this.selectedApp = undefined;
-        this.selectedSection = undefined;
+        this.eventListeners = new EventListeners();
     }
     handleOpenSearchChange() {
-        if (this.custom) {
-            if (this.openSearch) {
-                // 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);
-            }
-        }
-        else {
-            this.computeSearchOpenState();
-        }
-    }
-    /**
-     * Sets open state for search
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    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
-     *
-     * @deprecated Use six-header `custom` property instead
-     */
-    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);
+        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);
         }
     }
-    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;
-        }
-        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("six-header-item", { key: 'f5e4bf7b91ab71b6fde280777ef56741c4e8593b' }, h("six-icon-button", { key: '691a031db2a0f40177b54d689c2041647977a6f1', name: this.openHamburgerMenu ? 'menu_open' : 'menu', ref: this.setupMenu })));
-        const search = this.hasSlot(Slot.Search) && (h("six-header-item", { key: 'd25050b55ff11cd3888fd1cd7a922f850c43d513', active: this.isSectionSelected(Section.Search) }, h("six-icon-button", { key: '59cb3875f60c30c7829f57b39ad5a49dd58b3f6b', name: "search", onClick: () => this.toggleSearch(), "data-testid": "search-trigger" })));
-        const notifications = this.hasSlot(Slot.Notifications) && (h("six-header-item", { key: '2093e028f6b63d5a746121ce7f34a60ccd8b814c' }, h("slot", { key: '14b764a489ccef0d535d990c5827c0bfdcdfadb3', name: Slot.Notifications })));
-        const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (h("six-header-item", { key: 'b0640d2560ff7cb738f48985aaf0471cb7b49972', active: this.isSectionSelected(Section.AppSwitcher) }, h("six-dropdown", { key: '8e25753fce395164ce9cfc5479a46a19975de4b0', distance: 14, skidding: 20, placement: "bottom-end", ref: this.setupAppSwitcher }, h("div", { key: 'fe5f0fdf9411f05221c914533732db7be3d3d033', slot: "trigger", class: "six-header__app-switcher-dropdown" }, h("a", { key: '81a4d4647b1de8acaadc19d5e58d674c2b930ac4', onClick: this.appNameClicked, class: "six-header__selected-app" }, this.selectedApp), h("six-icon-button", { key: 'd903125dfa9ceadb186bc1eb56f15799c7705eb3', name: "apps" })), h("slot", { key: '57316a36e610fdedcd49a0eed7c81d3e26df3cca', name: Slot.AppSwitcher }))));
-        const profile = this.hasSlot(Slot.Profile) && (h("six-header-item", { key: 'a3133d7f1c50dda15b211fbf46f596e7934aa037', active: this.isSectionSelected(Section.Profile) }, h("six-dropdown", { key: 'c06dc87cd548d08ad0821350a54364e03189ec31', distance: 18, skidding: 20, placement: "bottom-end", ref: this.setupProfile }, h("slot", { key: '2f661377226178aee7fc5915939df0918991e4c6', name: "profile-avatar", slot: "trigger" }), h("slot", { key: '0c9ab4cf7a943e169515a2e73f5d154bf88e0300', name: "profile-menu" }))));
-        const logo = this.hasSlot(Slot.Logo) ? (h("six-header-item", null, h("slot", { name: "logo" }))) : (h("six-header-item", { class: { 'six-header__logo--clickable': this.clickableLogo }, ref: this.setupLogo }, h("six-logo", { brand: this.logo })));
-        const customView = (h(Host, { key: '0b95cbc2c5e2e132f1c6c789c33941efcc4e5a22' }, h("header", { key: 'e8c71cb2c22f2cdc410d2e678f5e30528e50f074', part: "header", class: "six-header" }, h("slot", { key: 'c8d3c17a6c3435f9d7338bcdf4e0dee210b5527a' })), h("div", { key: '1cfe987e74fb40b1ee774a0d3e9718e50770ef0e', 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.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: 'c6f91d3251a01c33281a0437c1273c1851641251', name: Slot.Search }))));
-        const defaultView = (h(Host, { key: '64fad48c1c9f738ec60d46eca751e0fbaa02121a' }, h("header", { key: '96ebb16b846a8f6331fa882dd557fb57bbc19bc1', part: "header", class: "six-header" }, hamburgerMenu, logo, h("six-header-item", { key: 'dbf70c1f28a8ac8e5fce05cd5d7d46b219057f59', class: "six-header__placeholder" }), h("six-header-item", { key: 'd3c30d7836f81bf58114f1ef9dffcd0ef51f078f' }, h("slot", { key: '2a0901b0730ed12d5f8f56f1b1ab575fb4863c6f' })), search, notifications, appSwitcher, profile), h("div", { key: 'aaf0973d3476a29d6ab3f117aa961e9dc6958bbe', class: {
-                'six-header__search-field': true,
-                'six-header__search-field--visible': this.isSectionSelected(Section.Search),
-                'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: '708bead402bdd620a21fa629b4ddf37772fc75e0', name: Slot.Search }))));
-        return this.custom ? customView : defaultView;
+            } }, h("slot", { key: '42d1ab374144bc3da2b1cd144e3328c64ee75204', name: 'search-field' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get host() { return this; }
     static get watchers() { return {
         "openSearch": ["handleOpenSearchChange"]
     }; }
-    static get style() { return SixHeaderStyle0; }
+    static get style() { return sixHeaderCss; }
 }, [1, "six-header", {
-        "custom": [4],
         "shiftContent": [4, "shift-content"],
-        "hideHamburgerMenu": [4, "hide-hamburger-menu"],
-        "openHamburgerMenu": [4, "open-hamburger-menu"],
-        "openSearch": [4, "open-search"],
-        "clickableLogo": [4, "clickable-logo"],
-        "logo": [1],
-        "selectedApp": [32],
-        "selectedSection": [32],
-        "setSearchOpenState": [64],
-        "getIsSearchOpen": [64]
+        "openSearch": [4, "open-search"]
     }, undefined, {
         "openSearch": ["handleOpenSearchChange"]
     }]);
@@ -234,63 +51,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["six-header", "six-checkbox", "six-dropdown", "six-error", "six-header-item", "six-icon", "six-icon-button", "six-input", "six-logo", "six-menu", "six-menu-item"];
+    const components = ["six-header"];
     components.forEach(tagName => { switch (tagName) {
         case "six-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SixHeader$1);
             }
             break;
-        case "six-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "six-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "six-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "six-header-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "six-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "six-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "six-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "six-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "six-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "six-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 
@@ -298,5 +65,6 @@ const SixHeader = SixHeader$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixHeader, defineCustomElement };
+//# sourceMappingURL=six-header.js.map
 
 //# sourceMappingURL=six-header.js.map

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

@@ -1 +1 @@
-{"file":"six-header.js","mappings":"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","names":["SixHeader"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__logo {\n    &--clickable {\n      cursor: pointer;\n    }\n  }\n\n  &__placeholder {\n    flex: 1;\n  }\n\n  &__app-switcher-dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  &__selected-app {\n    cursor: pointer;\n    font-size: var(--six-font-size-small);\n    font-weight: var(--six-font-weight-bold);\n    padding-right: 0;\n    padding-left: var(--six-spacing-x-small);\n    &:hover {\n      color: var(--six-header-selected-app-color-hover);\n    }\n  }\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition: var(--six-transition-fast) opacity, var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot, hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\n\nexport interface SixHeaderAppSwitcherSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderProfileSelectPayload {\n  selectedLabel: string;\n  name: string;\n  item: HTMLSixMenuItemElement;\n}\n\nexport interface SixHeaderSearchFieldToggle {\n  visible: boolean;\n}\n\nenum Section {\n  None,\n  Search,\n  AppSwitcher,\n  Profile,\n}\n\nenum Slot {\n  Search = 'search-field',\n  Notifications = 'notifications',\n  AppSwitcher = 'app-switcher-menu',\n  Profile = 'profile-menu',\n  Logo = 'logo',\n}\n\n/**\n * @since 1.0\n * @status stable\n * @slot - Used to define a custom component that is included in the header.\n * @slot search-field - Used to define the search field component in the header.\n * @slot notifications - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the notification component in the header.\n * @slot app-switcher-menu - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the application switcher menu in the header.\n * @slot profile-menu -  <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the profile menu in the header.\n * @slot profile-avatar - <span style=\"color:red\">[Deprecated]</span>, use six-header `custom` property instead. Used to define the avator in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /**\n   * Set `custom` to `true` for complete control over the header content. When enabled, all other properties and slots\n   * are ignored.\n   *\n   * Use `six-header-item`, `six-header-dropdown-item` and `six-header-menu-button` to structure the content.\n   *\n   * @since 4.2.7\n   * @status beta\n   */\n  @Prop() custom = false;\n\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set whether the hamburger menu should be visible or not\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() hideHamburgerMenu = false;\n\n  /**\n   * Set the hamburger menu icon to open or closed state\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Prop() openHamburgerMenu = false;\n\n  /**\n   * Set the header search to be in an open or closed state.\n   *\n   * If `custom` is `true`, focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  /**\n   * Set whether the logo should be clickable\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() clickableLogo = false;\n\n  /**\n   * The displayed logo. Either six or bme. Defaults to six.\n   *\n   * @deprecated Use six-header `custom` property with `six-logo` instead\n   */\n  @Prop() logo: 'six' | 'bme' = 'six';\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.custom) {\n      if (this.openSearch) {\n        // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n        setTimeout(async () => {\n          const slot = getSlot(this.host, Slot.Search);\n          slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n        }, 50);\n      }\n    } else {\n      this.computeSearchOpenState();\n    }\n  }\n\n  /**\n   * Sets open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async setSearchOpenState(openState: boolean) {\n    if (this.selectedSection === Section.Search && !openState) {\n      this.selectedSection = Section.None;\n    } else if (openState && this.selectedSection !== Section.Search) {\n      this.selectedSection = Section.Search;\n    }\n  }\n\n  /**\n   * Get open state for search\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Method()\n  async getIsSearchOpen() {\n    return this.selectedSection === Section.Search;\n  }\n\n  /**\n   * Emitted when the name of the selected app is clicked.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-name-clicked' }) sixAppNameClicked!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when a menu item is in the app switcher menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-header-menu-button` instead\n   */\n  @Event({ eventName: 'six-header-app-switcher-select' })\n  sixAppSwitcherSelect!: EventEmitter<SixHeaderAppSwitcherSelectPayload>;\n\n  /**\n   * Emitted when a menu item is in the profile menu is selected.\n   *\n   * @deprecated Use six-header `custom` property with `six-header-dropdown-item` and `six-avatar` instead\n   */\n  @Event({ eventName: 'six-header-profile-select' }) sixProfileSelect!: EventEmitter<SixHeaderProfileSelectPayload>;\n\n  /**\n   * Emitted when the hamburger menu is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-hamburger-menu-clicked' }) sixHamburgerClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the header logo is clicked.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-logo-clicked' }) logoClick!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when search field is toggled.\n   *\n   * @deprecated Use six-header `custom` property instead\n   */\n  @Event({ eventName: 'six-header-search-field-toggle' })\n  sixSearchFieldToggle!: EventEmitter<SixHeaderSearchFieldToggle>;\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  private slots?: Record<Slot, boolean>;\n\n  private mutationObserver?: MutationObserver;\n\n  @State() selectedApp?: string;\n  @State() selectedSection?: Section;\n\n  private hasSlot(slot: Slot): boolean {\n    if (this.slots == null) {\n      return false;\n    }\n    return this.slots[slot];\n  }\n\n  private isSectionSelected(value: Section) {\n    return value === this.selectedSection;\n  }\n\n  private selectSection(section: Section) {\n    return () => (this.selectedSection = section);\n  }\n\n  private toggleSearch() {\n    const visible = this.selectedSection !== Section.Search;\n    this.selectedSection = this.selectedSection === Section.Search ? Section.None : Section.Search;\n    this.sixSearchFieldToggle.emit({ visible });\n    if (this.selectedSection === Section.Search) {\n      // setFocus deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(async () => {\n        const slot = getSlot(this.host, Slot.Search);\n        slot?.shadowRoot?.querySelector('six-input')?.setFocus();\n      }, 50);\n    }\n  }\n\n  private setupMenu = (el?: HTMLSixIconButtonElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.sixHamburgerClick.emit());\n  };\n\n  private setupLogo = (el?: HTMLElement) => {\n    if (!this.clickableLogo || el == null) return;\n\n    this.eventListeners.add(el, 'click', () => this.logoClick.emit());\n  };\n\n  private setupProfile = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.Profile));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.sixProfileSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private setupAppSwitcher = (el?: HTMLSixDropdownElement) => {\n    if (el == null) return;\n\n    this.eventListeners.add(el, 'six-dropdown-show', this.selectSection(Section.AppSwitcher));\n    this.eventListeners.add(el, 'six-dropdown-hide', this.selectSection(Section.None));\n    this.eventListeners.add(el, 'six-menu-item-selected', (event: Event) => {\n      const { name, item } = (event as CustomEvent).detail;\n      this.selectedApp = item.innerText;\n      this.sixAppSwitcherSelect.emit({ selectedLabel: item.innerText, name, item });\n    });\n  };\n\n  private appNameClicked = () => this.sixAppNameClicked.emit();\n\n  private computeSearchOpenState = () => {\n    this.selectedSection = this.openSearch ? Section.Search : Section.None;\n  };\n\n  componentWillLoad() {\n    this.slots = {\n      [Slot.Search]: hasSlot(this.host, Slot.Search),\n      [Slot.Notifications]: hasSlot(this.host, Slot.Notifications),\n      [Slot.AppSwitcher]: hasSlot(this.host, Slot.AppSwitcher),\n      [Slot.Profile]: hasSlot(this.host, Slot.Profile),\n      [Slot.Logo]: hasSlot(this.host, Slot.Logo),\n    };\n\n    if (this.hasSlot(Slot.AppSwitcher)) {\n      this.updateSelectedApp();\n    }\n\n    if (this.hasSlot(Slot.Search)) {\n      this.computeSearchOpenState();\n    }\n  }\n\n  connectedCallback() {\n    const appSwitcherSlot = getSlot(this.host, Slot.AppSwitcher);\n    if (appSwitcherSlot) {\n      this.mutationObserver = new MutationObserver((mutations) => {\n        if (mutations.some((mutation) => mutation.type === 'childList' || mutation.type === 'attributes')) {\n          this.updateSelectedApp();\n        }\n      });\n      this.mutationObserver.observe(appSwitcherSlot, { attributes: true, childList: true, subtree: true });\n    }\n  }\n\n  private updateSelectedApp() {\n    // there are more concise ways to select the first checked menu item, but this is one that works for jest\n    const element = getSlot(this.host, Slot.AppSwitcher);\n    if (element == null) {\n      return undefined;\n    }\n    const items = Array.from(element.querySelectorAll('six-menu-item'));\n    const firstCheckedMenuItem = items.find(\n      (item) => item.hasAttribute('checked') && item.getAttribute('checked') !== 'false'\n    );\n    this.selectedApp = firstCheckedMenuItem?.textContent ?? undefined;\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n    this.mutationObserver?.disconnect();\n  }\n\n  render() {\n    const hamburgerMenu = !this.hideHamburgerMenu && (\n      <six-header-item>\n        <six-icon-button name={this.openHamburgerMenu ? 'menu_open' : 'menu'} ref={this.setupMenu} />\n      </six-header-item>\n    );\n\n    const search = this.hasSlot(Slot.Search) && (\n      <six-header-item active={this.isSectionSelected(Section.Search)}>\n        <six-icon-button name=\"search\" onClick={() => this.toggleSearch()} data-testid=\"search-trigger\" />\n      </six-header-item>\n    );\n\n    const notifications = this.hasSlot(Slot.Notifications) && (\n      <six-header-item>\n        <slot name={Slot.Notifications} />\n      </six-header-item>\n    );\n\n    const appSwitcher = this.hasSlot(Slot.AppSwitcher) && (\n      <six-header-item active={this.isSectionSelected(Section.AppSwitcher)}>\n        <six-dropdown distance={14} skidding={20} placement=\"bottom-end\" ref={this.setupAppSwitcher}>\n          <div slot=\"trigger\" class=\"six-header__app-switcher-dropdown\">\n            <a onClick={this.appNameClicked} class=\"six-header__selected-app\">\n              {this.selectedApp}\n            </a>\n            <six-icon-button name=\"apps\" />\n          </div>\n          <slot name={Slot.AppSwitcher} />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const profile = this.hasSlot(Slot.Profile) && (\n      <six-header-item active={this.isSectionSelected(Section.Profile)}>\n        <six-dropdown distance={18} skidding={20} placement=\"bottom-end\" ref={this.setupProfile}>\n          <slot name=\"profile-avatar\" slot=\"trigger\" />\n          <slot name=\"profile-menu\" />\n        </six-dropdown>\n      </six-header-item>\n    );\n\n    const logo = this.hasSlot(Slot.Logo) ? (\n      <six-header-item>\n        <slot name=\"logo\" />\n      </six-header-item>\n    ) : (\n      <six-header-item class={{ 'six-header__logo--clickable': this.clickableLogo }} ref={this.setupLogo}>\n        <six-logo brand={this.logo} />\n      </six-header-item>\n    );\n\n    const customView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    const defaultView = (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          {hamburgerMenu}\n          {logo}\n          <six-header-item class=\"six-header__placeholder\" />\n          <six-header-item>\n            <slot />\n          </six-header-item>\n          {search}\n          {notifications}\n          {appSwitcher}\n          {profile}\n        </header>\n\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.isSectionSelected(Section.Search),\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={Slot.Search} />\n        </div>\n      </Host>\n    );\n\n    return this.custom ? customView : defaultView;\n  }\n}\n"],"version":3}
+{"file":"six-header.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,+pCAA+pC;;MCevqCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,GAAA;;;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAE5B;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAelB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAwB9C;IApCC,sBAAsB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;;YAEnB,UAAU,CACR,8BAAY,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,cAAc,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,aAAa,CAAC,WAAW,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAClG,EAAE,CACH;;;IAQL,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,YAAY,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,0BAA0B,EAAE,IAAI;gBAChC,mCAAmC,EAAE,IAAI,CAAC,UAAU;gBACpD,yCAAyC,EAAE,IAAI,CAAC,YAAY;AAC7D,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAE,cAAc,GAAI,CAC1B,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-header/six-header.scss?tag=six-header&encapsulation=shadow","src/components/six-header/six-header.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n  user-select: none;\n  --search-border-width: 1px;\n}\n\n::slotted(six-search-field) {\n  position: absolute;\n  margin-left: var(--search-border-width);\n  width: calc(100% - 2 * var(--search-border-width));\n}\n\n.six-header {\n  display: flex;\n  width: 100%;\n  height: var(--six-header-height);\n  background-color: var(--six-header-background-color);\n  align-items: stretch;\n  box-shadow: var(--six-shadow-medium);\n  border-bottom: var(--six-header-border-with) solid var(--six-header-border-color);\n\n  &__search-field {\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      var(--six-transition-fast) opacity,\n      var(--six-transition-fast) transform;\n    display: none;\n\n    &--visible {\n      opacity: 1;\n      transform: none;\n      display: block;\n    }\n\n    &--shift-content.six-header__search-field--visible {\n      height: 2.65rem;\n      transition: var(--six-transition-fast) height;\n    }\n\n    &--shift-content:not(.six-header__search-field--visible) {\n      height: 0;\n      transition: var(--six-transition-fast) height;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { getSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n * @slot search-field - Used to define the search field component in the header.\n */\n@Component({\n  tag: 'six-header',\n  styleUrl: 'six-header.scss',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class SixHeader {\n  /** Indicates if content should be shifted down when search field is visible. */\n  @Prop() shiftContent = false;\n\n  /**\n   * Set the header search input to be in an open or closed state.\n   *\n   * Focuses the first `six-input` found in the search slot.\n   */\n  @Prop() openSearch = false;\n\n  @Watch('openSearch')\n  handleOpenSearchChange() {\n    if (this.openSearch) {\n      // deferred due to https://github.com/ionic-team/stencil/issues/3772\n      setTimeout(\n        async () => getSlot(this.host, 'search-field')?.shadowRoot?.querySelector('six-input')?.setFocus(),\n        50\n      );\n    }\n  }\n\n  @Element() host!: HTMLSixHeaderElement;\n\n  private eventListeners = new EventListeners();\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <Host>\n        <header part=\"header\" class=\"six-header\">\n          <slot />\n        </header>\n        <div\n          class={{\n            'six-header__search-field': true,\n            'six-header__search-field--visible': this.openSearch,\n            'six-header__search-field--shift-content': this.shiftContent,\n          }}\n        >\n          <slot name={'search-field'} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-icon-button.js

@@ -1,8 +1,9 @@
-import { S as SixIconButton$1, d as defineCustomElement$1 } from './six-icon-button2.js';
+import { S as SixIconButton$1, d as defineCustomElement$1 } from './p-Cosz73fX.js';
 
 const SixIconButton = SixIconButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIconButton, defineCustomElement };
+//# sourceMappingURL=six-icon-button.js.map
 
 //# sourceMappingURL=six-icon-button.js.map

package/dist/components/six-icon.js

@@ -1,8 +1,9 @@
-import { S as SixIcon$1, d as defineCustomElement$1 } from './six-icon2.js';
+import { S as SixIcon$1, d as defineCustomElement$1 } from './p-BSHZAiyG.js';
 
 const SixIcon = SixIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixIcon, defineCustomElement };
+//# sourceMappingURL=six-icon.js.map
 
 //# sourceMappingURL=six-icon.js.map

package/dist/components/six-input.js

@@ -1,8 +1,9 @@
-import { S as SixInput$1, d as defineCustomElement$1 } from './six-input2.js';
+import { S as SixInput$1, d as defineCustomElement$1 } from './p-DsGIkEDB.js';
 
 const SixInput = SixInput$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixInput, defineCustomElement };
+//# sourceMappingURL=six-input.js.map
 
 //# sourceMappingURL=six-input.js.map

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

@@ -1,8 +1,9 @@
-import { S as SixItemPicker$1, d as defineCustomElement$1 } from './six-item-picker2.js';
+import { S as SixItemPicker$1, d as defineCustomElement$1 } from './p-BR2t7cws.js';
 
 const SixItemPicker = SixItemPicker$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixItemPicker, defineCustomElement };
+//# sourceMappingURL=six-item-picker.js.map
 
 //# sourceMappingURL=six-item-picker.js.map