@itcenteratunihelsinki/huds-lib 0.5.12 → 0.5.16

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

@@ -1,4 +1,6 @@
-import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
+let timeout = null;
+let delay = 250;
+import { Component, Element, Event, Fragment, h, Listen, Prop, State } from '@stencil/core';
 import ResizeObserver from 'resize-observer-polyfill';
 import { MenuType, ColorVariant, SiteLogoSize } from '../../utils/utils';
 import { jsonParserWorker } from '../../global/globalScript';
@@ -13,6 +15,7 @@ export class SiteHeader {
     this.menuType = null;
     this.isMenuOpen = false;
     this.isDesktopMenuOpen = false;
+    this.isDesktopMenuDropdown = false;
     this.isTopMenuOpen = false;
     this.lastScrollTop = 0;
     this.delta = 5;
@@ -86,6 +89,9 @@ export class SiteHeader {
     this.el.children[0].setAttribute('menu-language-label-open', this.languageLabels['open']);
     this.el.children[0].setAttribute('menu-language-label-close', this.languageLabels['close']);
     this.el.children[0].setAttribute('label-front-page', this.menuLabels['front_page']);
+    if (this.groupType !== '') {
+      this.isDesktopMenuDropdown = true;
+    }
   }
   hasScrolled() {
     let topOffset = window.pageYOffset;
@@ -137,10 +143,7 @@ export class SiteHeader {
   }
   applySizeClasses(size) {
     // Set the menu-type based on the width of the browser.
-    if (size <= 1200 && size > 960) {
-      this.menuType = MenuType.tablet;
-    }
-    else if (size <= 960) {
+    if (size <= 1200) {
       this.menuType = MenuType.mobile;
     }
     else {
@@ -148,18 +151,18 @@ export class SiteHeader {
     }
     // Pass the menu type to menu component.
     this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);
-    const menuAttribute = this.menuType === MenuType.tablet ? MenuType.mobile : this.menuType;
+    const menuAttribute = this.menuType;
     this.el.children[0].setAttribute('menu-type', menuAttribute);
   }
   render() {
-    var _a, _b;
+    var _a;
     if (this.menuType === null)
       return;
     const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;
     const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
     const logoColor = ColorVariant.black;
     const logoColorGroup = ColorVariant.white;
-    let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
+    let classAttributes = ['hy-site-header', `hy-site-header--${this.menuType}`, this.isGroup ? 'is-group' : ''];
     const toggleMenuMobileAndRemoveListener = () => {
       window.removeEventListener('click', handleClickOutside);
       this.mobileMenuToggle();
@@ -173,118 +176,89 @@ export class SiteHeader {
     if (this.isMenuOpen) {
       window.addEventListener('click', handleClickOutside);
     }
+    const handleHeaderElementContentStack = (element) => {
+      if (element.offsetHeight > 133) {
+        element.classList.add('is-stacked');
+      }
+      else {
+        element.classList.remove('is-stacked');
+      }
+    };
+    window.onload = () => {
+      const headerElement = this.el.shadowRoot.querySelector('.hy-site-header');
+      handleHeaderElementContentStack(headerElement);
+      window.addEventListener('resize', () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => handleHeaderElementContentStack(headerElement), delay);
+      });
+    };
     switch (this.menuType) {
       case MenuType.desktop:
         // Larger than 1200px screens
         return [
-          h("header", { class: classAttributes.join(' ') },
-            h("div", { class: { 'hy-backdrop': true, 'is-active': this.isMenuOpen || this.isTopMenuOpen } }),
-            this.isGroup && (h("div", { class: "hy-site-header__content-top" },
-              h("div", { class: 'hy-site-header__logo-container group ', role: "navigation" },
-                h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel }),
-                h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks })),
-              h("div", { class: 'menu--secondary menu--secondary--group' },
-                h("hy-menu-language", { class: 'menu--secondary__item is-first group', "is-group": true, "is-mobile": false, "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
-                !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 16, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-                this.donateLink.map((i) => {
-                  return (h("a", { class: 'menu--secondary__item hy-link__donate group', href: i.url },
-                    h("hy-icon", { icon: 'hy-icon-heart-support', size: 16, fill: logoColorGroup }),
-                    h("span", { class: 'hy-link__donate__label group' }, i.label)));
-                })))),
-            h("div", { class: { 'hy-site-header__content': true, group: this.isGroup } },
-              h("div", { class: 'hy-site-header__logo-container' },
-                this.isGroup && this.groupType == 'research_group_menu' && (h("div", { class: 'hy-site-header__logo-container__group_label' }, this.researchGroupLabel)),
-                this.isGroup ? (h("a", { class: 'group', href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
-              this.groupType != 'research_group_menu' && (h("hy-desktop-menu-links", { "data-desktop-links": this.dataDesktopLinks })),
-              !this.isGroup && (h("div", { class: 'menu--secondary' },
-                h("hy-menu-language", { class: 'menu--secondary__item is-first', "is-mobile": false, "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
-                !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item', size: 14, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-                this.donateLink.map((i) => {
-                  return (h("a", { class: 'menu--secondary__item hy-link__donate', href: i.url },
+          h("header", { class: `${classAttributes.join(' ')}` },
+            h("div", { class: {
+                'hy-backdrop': true,
+                'is-active': (this.isMenuOpen && !this.isDesktopMenuDropdown) ||
+                  (this.isTopMenuOpen && !this.isDesktopMenuDropdown),
+              } }),
+            this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` },
+              h("div", { class: "hy-site-header__container" },
+                h("div", { class: "hy-site-header__branding" },
+                  h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
+                h("hy-menu-main-group", { tabindex: "0", "is-mobile": false, "menu-label": (_a = this.groupPages['university_main_menu']) !== null && _a !== void 0 ? _a : null, "data-main-menu": this.dataMainMenuLinks }),
+                h("div", { class: "hy-site-header__actions" },
+                  h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }),
+                  !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
+                  this.donateLink.map(({ label, url }) => {
+                    return (h("a", { class: 'hy-site-header__donate-link', href: url },
+                      h("hy-icon", { icon: 'hy-icon-heart-support', size: 14, fill: ColorVariant.black }),
+                      h("span", null, label)));
+                  }))))),
+            h("section", { class: `hy-site-header__container ${this.isGroup ? 'is-group' : ''}` },
+              h("div", { class: 'hy-site-header__branding' },
+                this.isGroup && this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel),
+                this.isGroup ? (h("a", { href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
+              this.groupType != 'research_group_menu' && (h("hy-desktop-menu-links", { "data-desktop-links": this.dataDesktopLinks, isGroup: this.isGroup, isDropdown: this.isDesktopMenuDropdown })),
+              !this.isGroup && (h("div", { class: "hy-site-header__actions" },
+                h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
+                !this.noSearch && (h("hy-site-search", { size: 14, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
+                this.donateLink.map(({ label, url }) => {
+                  return (h("a", { class: 'hy-site-header__donate-link', href: url },
                     h("hy-icon", { icon: 'hy-icon-heart-support', size: 14, fill: ColorVariant.black }),
-                    h("span", { class: 'hy-link__donate__label' }, i.label)));
+                    h("span", null, label)));
                 }))))),
         ];
-      case MenuType.tablet:
-        // 960px-1200px screens
-        return (h("header", { class: classAttributes.join(' ') },
-          h("div", { class: { 'hy-backdrop': true, 'is-active': this.isMenuOpen } }),
-          this.isGroup && (h("div", { class: "hy-site-header__content-top" },
-            h("div", { class: 'hy-site-header__logo-container group ', role: "navigation" },
-              h("hy-site-logo", { "is-group": 'true', size: logoSize, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel }),
-              h("hy-menu-main-group", { "is-mobile": false, "menu-label": (_b = this.groupPages['university_main_menu']) !== null && _b !== void 0 ? _b : '', "data-main-menu": this.dataMainMenuLinks })),
-            h("div", { class: 'menu--secondary menu--secondary--group' },
-              h("hy-menu-language", { class: 'menu--secondary__item is-first group', "is-group": true, "is-mobile": false, "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
-              !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 16, color: logoColorGroup, "show-label": this.showSearchLabel, "is-group": true, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-              this.donateLink.map((i) => {
-                return (h("a", { class: 'menu--secondary__item hy-link__donate group', href: i.url },
-                  h("hy-icon", { icon: 'hy-icon-heart-support', size: 16, fill: logoColorGroup }),
-                  h("span", { class: 'hy-link__donate__label group' }, i.label)));
-              })))),
-          h("div", { class: { 'hy-site-header__content': true, group: this.isGroup } },
-            h("div", { class: 'hy-site-header__logo-container' },
-              this.isGroup && this.groupType == 'research_group_menu' && (h("div", { class: 'hy-site-header__logo-container__group_label' }, this.researchGroupLabel)),
-              this.isGroup ? (h("a", { class: 'group', href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
-            !this.isGroup && (h("div", { class: 'menu--secondary' },
-              h("hy-menu-language", { class: 'menu--secondary__item is-first', "is-mobile": false, "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels }),
-              !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item', size: 14, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-              this.donateLink.map((i) => {
-                return (h("a", { class: 'menu--secondary__item hy-link__donate', href: i.url },
-                  h("hy-icon", { icon: 'hy-icon-heart-support', size: 14, fill: ColorVariant.black }),
-                  h("span", { class: 'hy-link__donate__label' }, i.label)));
-              }))),
-            h("div", { class: 'hy-site-header__menu-container' },
-              h("span", { class: {
-                  'hy-site-header__menu-label': true,
-                  'is-visible': this.isMenuOpen,
-                } }, this.menuLabel),
-              h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: {
-                  'hy-site-header__panel-toggle': true,
-                  'is-open': this.isMenuOpen,
-                }, "aria-label": this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open'] }, this.isMenuOpen ? (h("span", { class: "hy-site-header__panel-toggle__label" },
-                this.menuLabelClose,
-                h("hy-icon", { icon: 'hy-icon-remove', size: 20, fill: ColorVariant.black }))) : (h("span", { class: "hy-site-header__panel-toggle__label" },
-                this.menuLabelOpen,
-                h("hy-icon", { icon: 'hy-icon-hamburger', size: 20, fill: ColorVariant.black })))),
-              h("div", { class: {
-                  'is-open': this.isMenuOpen,
-                  'hy-site-header__panel': true,
-                } },
-                h("slot", { name: 'menu' }))))));
       case MenuType.mobile:
         // Smaller than 960px screens
         return (h("header", { class: classAttributes.join(' ') },
           h("div", { class: { 'hy-backdrop': true, 'is-active': this.isMenuOpen } }),
           h("div", { class: { 'hy-backdrop': true, 'is-active-top': this.isTopMenuOpen } }),
-          this.isGroup && (h("div", { class: { 'hy-site-header__content-top': true, 'is-open': this.isTopMenuOpen }, "is-mobile": true },
-            h("div", { class: 'hy-site-header__logo-container group ' },
-              h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
-            h("div", { class: 'menu--secondary menu--secondary--group' },
-              !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-              h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks })))),
-          h("div", { class: { 'hy-site-header__content': true, group: this.isGroup } },
-            h("div", { class: 'hy-site-header__logo-container' },
-              this.groupType == 'research_group_menu' && (h("div", { class: 'hy-site-header__logo-container__group_label' }, this.researchGroupLabel)),
-              this.isGroup ? (h("a", { class: 'group', href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
-            h("div", { class: { 'hy-site-header__menu-container': true, 'is-open': this.isMenuOpen } },
-              !this.isGroup && !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item', size: 14, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
-              h("span", { class: {
-                  'hy-site-header__menu-label': true,
-                  'is-visible': this.isMenuOpen,
-                } }, this.menuLabel),
-              h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: {
-                  'hy-site-header__panel-toggle': true,
-                  'is-open': this.isMenuOpen,
-                }, "aria-label": this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open'] }, this.isMenuOpen ? (h("span", { class: "hy-site-header__panel-toggle__label" },
-                this.menuLabelClose,
-                h("hy-icon", { icon: 'hy-icon-remove', size: 20, fill: ColorVariant.black }))) : (h("span", { class: "hy-site-header__panel-toggle__label" },
-                this.menuLabelOpen,
-                h("hy-icon", { icon: 'hy-icon-hamburger', size: 20, fill: ColorVariant.black })))),
-              h("div", { class: {
-                  'is-open': this.isMenuOpen,
-                  'hy-site-header__panel': true,
-                } },
-                h("slot", { name: 'menu' }))))));
+          this.isGroup && (h("section", { class: `hy-site-header__content-top ${this.isTopMenuOpen ? 'is-open' : ''}` },
+            h("div", { class: "hy-site-header__container" },
+              h("div", { class: "hy-site-header__branding" },
+                h("hy-site-logo", { "is-group": true, size: logoSizeGroup, color: logoColorGroup, url: this.siteUrl, label: this.siteLabel })),
+              h("div", { class: "hy-site-header__actions" },
+                h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels, isGroup: true }),
+                !this.noSearch && (h("hy-site-search", { class: 'menu--secondary__item group', size: 18, color: logoColorGroup, "is-group": true, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
+                h("hy-menu-main-group", { "site-label": this.siteLabel, "site-url": this.siteUrl, "logo-label": this.logoLabel, "logo-url": this.logoUrl, "is-mobile": true, donate: this.donateLink, "data-main-menu": this.dataMainMenuLinks }))))),
+          h("section", { class: "hy-site-header__container" },
+            h("div", { class: 'hy-site-header__branding' },
+              this.groupType == 'research_group_menu' && h("p", null, this.researchGroupLabel),
+              this.isGroup ? (h("a", { href: this.logoUrl }, this.logoLabel)) : (h("hy-site-logo", { size: logoSize, color: logoColor, url: this.logoUrl, label: this.logoLabel }))),
+            h("div", { class: "hy-site-header__actions" },
+              !this.isGroup && (h("hy-menu-language", { "data-menu-language": this.dataMenuLanguage, labels: this.languageLabels })),
+              !this.isGroup && !this.noSearch && (h("hy-site-search", { size: 24, color: ColorVariant.black, "show-label": this.showSearchLabel, labels: this.searchLabels, "search-labels": this.dataSiteSearchLabels, "search-tools": this.dataSearchTools })),
+              h("button", { onClick: () => toggleMenuMobileAndRemoveListener(), class: `hy-site-header__menu-open-button`, "aria-label": this.menuLabels['open'], "aria-expanded": `${this.isMenuOpen}` },
+                !this.isMenuOpen && h("hy-icon", { icon: 'hy-icon-hamburger', size: 24, fill: ColorVariant.black }),
+                this.isMenuOpen && (h(Fragment, null,
+                  h("span", null, "Close"),
+                  h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))))),
+            h("div", { class: {
+                'is-open': this.isMenuOpen,
+                'hy-site-header__panel': true,
+              }, "aria-hidden": `${!this.isMenuOpen}` },
+              h("slot", { name: 'menu' })))));
     }
   }
   static get is() { return "hy-site-header"; }
@@ -665,6 +639,7 @@ export class SiteHeader {
     "isMobile": {},
     "isMenuOpen": {},
     "isDesktopMenuOpen": {},
+    "isDesktopMenuDropdown": {},
     "isTopMenuOpen": {},
     "lastScrollTop": {},
     "delta": {},

package/dist/collection/components/site-header/site-logo/site-logo.css

@@ -92,13 +92,14 @@
 }
 
 @media (min-width: 30rem) {
-  .hy-site-header__logo-container .hy-site-logo__label {
+  .hy-site-header__branding .hy-site-logo__label {
     min-width: -webkit-min-content;
     min-width: -moz-min-content;
     min-width: min-content;
     max-width: -webkit-max-content;
     max-width: -moz-max-content;
     max-width: max-content;
+    white-space: nowrap;
   }
 }
 

package/dist/collection/components/site-header/site-search/site-search.css

@@ -57,169 +57,114 @@
 }
 
 .button--search {
+  font-size: 0.75rem;
+  line-height: 24px;
+  font-weight: 400;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   background: transparent;
   border: 0 none;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 12px;
+  color: var(--brand-main-nearly-black);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   font-family: var(--main-font-family);
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  letter-spacing: -0.5px;
+  width: 44px;
 }
 
-@media (min-width: 30rem) {
+@media (min-width: 75.0625rem) {
   .button--search {
-    padding: 15px 5px;
+    display: inline-grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 4px;
+    width: auto;
   }
 }
 
-@media (min-width: 60rem) {
+@media (min-width: 1601px) {
   .button--search {
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: reverse;
-    -ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-    padding: 0;
-  }
-  .button--search:focus {
-    outline: solid 2px var(--additional-yellow);
-    outline-offset: 2px;
+    font-size: 0.875rem;
+    line-height: 24px;
   }
 }
 
-.button--search.is-open--menu {
-  position: absolute;
-  right: 50px;
-  top: 15px;
-  z-index: 101;
-}
-
-.button--search__label {
-  font-family: var(--main-font-family);
-  margin-left: 4px;
-}
-
-.button--search:not(.group):hover {
+.button--search:hover {
   color: var(--brand-main);
   cursor: pointer;
 }
 
-.button--search:not(.group):hover span {
-  color: var(--brand-main);
-}
-
-.button--search:not(.group):hover svg {
+.button--search:hover svg {
   fill: var(--brand-main);
 }
 
-.button--search:not(.group) svg {
-  height: 20px;
-  width: 20px;
-}
-
-@media (min-width: 60rem) {
-  .button--search:not(.group) svg {
-    height: 16px;
-    width: 16px;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .button--search:not(.group) svg {
-    height: 12px;
-    width: 12px;
-  }
+.button--search:focus {
+  outline: solid 2px var(--additional-yellow);
+  outline-offset: 2px;
 }
 
-@media (min-width: 1601px) {
-  .button--search:not(.group) svg {
-    height: 16px;
-    width: 16px;
-  }
-}
-
-.button--search:not(.group) .button--search__label {
-  font-size: 0.875rem;
-  line-height: 14px;
-  font-weight: 700;
-  color: var(--site-logo-color);
-  display: none;
-  letter-spacing: -0.9px;
-  visibility: hidden;
+.button--search[aria-expanded=true] {
+  position: relative;
 }
 
-@media (min-width: 30rem) {
-  .button--search:not(.group) .button--search__label {
-    font-size: 0.9375rem;
-    line-height: 24px;
-    margin-left: 4px;
-    text-transform: uppercase;
-  }
-}
-
-@media (min-width: 60rem) {
-  .button--search:not(.group) .button--search__label {
-    font-size: 0.875rem;
-    line-height: 24px;
-    font-weight: 600;
-    display: block;
-    letter-spacing: -0.5px;
-    text-transform: none;
-    visibility: visible;
-  }
-}
-
-@media (min-width: 75.0625rem) {
-  .button--search:not(.group) .button--search__label {
-    font-size: 0.75rem;
-    line-height: 12px;
-    font-weight: 400;
-    letter-spacing: -0.6px;
-  }
+.button--search[aria-expanded=true]:after {
+  content: "";
+  position: absolute;
+  height: 4px;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  background-color: var(--grayscale-black);
 }
 
-@media (min-width: 1601px) {
-  .button--search:not(.group) .button--search__label {
-    font-size: 0.875rem;
-    line-height: 24px;
-    letter-spacing: -0.5px;
-  }
+.is-group .button--search {
+  color: var(--grayscale-white);
 }
 
-.button--search.group:hover {
+.is-group .button--search:hover {
   color: var(--grayscale-medium);
   cursor: pointer;
 }
 
-.button--search.group:hover span {
-  color: var(--grayscale-medium);
+.is-group .button--search:hover svg {
+  fill: var(--grayscale-medium);
 }
 
-.button--search.group:hover svg {
-  fill: var(--grayscale-medium);
+.button--search.is-open--menu {
+  position: absolute;
+  right: 50px;
+  top: 15px;
+  z-index: 101;
 }
 
-.button--search.group .button--search__label {
-  color: var(--grayscale-white);
+.button--search__label {
   display: none;
+  visibility: hidden;
 }
 
-@media (min-width: 60rem) {
-  .button--search.group .button--search__label {
-    font-size: 0.875rem;
-    line-height: 24px;
-    font-weight: 600;
+@media (min-width: 75.0625rem) {
+  .button--search__label {
     display: block;
-    letter-spacing: -0.5px;
+    visibility: visible;
+    -webkit-box-ordinal-group: 3;
+    -ms-flex-order: 2;
+    order: 2;
   }
 }
 
+.site-search {
+  height: 100%;
+}
+
 .site-search__panel {
   display: none;
 }

package/dist/collection/components/site-header/site-search/site-search.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Listen, Host, Event, Element } from '@stencil/core';
+import { Component, Prop, h, State, Listen, Event, Element } from '@stencil/core';
 import { ColorVariant } from '../../../utils/utils';
 import { jsonParserWorker } from '../../../global/globalScript';
 export class SiteSearch {
@@ -128,13 +128,13 @@ export class SiteSearch {
     }
   }
   render() {
-    return (h(Host, { class: {
+    return (h("div", { class: {
         'site-search': true,
         'site-search__is-open': this.isSearchPanelOpen,
+        'is-group': this.isGroup,
       } },
       h("button", { "aria-label": this.showLabel ? this._labels['open'] : '', "aria-expanded": `${this.isSearchPanelOpen}`, class: {
           'button--search': true,
-          group: this.isGroup,
           'is-open--menu': this.isAlternative,
           'is-open': this.isSearchPanelOpen,
         }, onClick: (e) => this.handleSearchPanelToggle(e) },

package/dist/esm/color-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-fbbc09ec.js';
+import { r as registerInstance, h, H as Host } from './index-a38b87db.js';
 
 const colorBoxCss = ":host{display:block}";
 

package/dist/esm/{globalScript-5c9d232b.js → globalScript-968b96dd.js}

@@ -1,4 +1,4 @@
-import { s as setMode } from './index-fbbc09ec.js';
+import { s as setMode } from './index-a38b87db.js';
 
 /**
  * This is a demo on how to initialize different themes with a class name from body element.