@itcenteratunihelsinki/huds-lib 0.7.5 → 0.7.7

package/dist/collection/components/icon/icon.js

@@ -2,53 +2,115 @@ import { Component, h, Prop, Host } from '@stencil/core';
 import * as icons from './icons';
 // TODO: add all icons
 const iconNames = {
-  'hy-icon-avatar-group': (p) => h(icons.AvatarGroup, Object.assign({}, p)),
+  'hy-icon-add-todo': (p) => h(icons.AddToTodoList, Object.assign({}, p)),
+  'hy-icon-alert': (p) => h(icons.Alert, Object.assign({}, p)),
+  'hy-icon-archive': (p) => h(icons.Archive, Object.assign({}, p)),
   'hy-icon-arrow-down': (p) => h(icons.ArrowDown, Object.assign({}, p)),
   'hy-icon-arrow-left': (p) => h(icons.IconArrowLeft, Object.assign({}, p)),
   'hy-icon-arrow-right': (p) => h(icons.IconArrowRight, Object.assign({}, p)),
   'hy-icon-arrow-to-right': (p) => h(icons.IconArrowToRight, Object.assign({}, p)),
-  'hy-icon-alert': (p) => h(icons.Alert, Object.assign({}, p)),
-  'hy-icon-archive': (p) => h(icons.Archive, Object.assign({}, p)),
   'hy-icon-arrow-up': (p) => h(icons.ArrowUp, Object.assign({}, p)),
+  'hy-icon-avatar-group': (p) => h(icons.AvatarGroup, Object.assign({}, p)),
+  'hy-icon-avatar': (p) => h(icons.Avatar, Object.assign({}, p)),
   'hy-icon-bachelor': (p) => h(icons.Bachelor, Object.assign({}, p)),
   'hy-icon-bullet-list': (p) => h(icons.BulletList, Object.assign({}, p)),
   'hy-icon-camera': (p) => h(icons.Camera, Object.assign({}, p)),
   'hy-icon-caret-down': (p) => h(icons.CaretDown, Object.assign({}, p)),
   'hy-icon-caret-left': (p) => h(icons.CaretLeft, Object.assign({}, p)),
   'hy-icon-caret-right': (p) => h(icons.CaretRight, Object.assign({}, p)),
+  'hy-icon-caret-up': (p) => h(icons.CaretUp, Object.assign({}, p)),
+  'hy-icon-chat': (p) => h(icons.Chat, Object.assign({}, p)),
+  'hy-icon-code-fork': (p) => h(icons.CodeFork, Object.assign({}, p)),
+  'hy-icon-cogs': (p) => h(icons.Cogs, Object.assign({}, p)),
+  'hy-icon-content-link': (p) => h(icons.Contentlink, Object.assign({}, p)),
+  'hy-icon-custom-link': (p) => h(icons.Customlink, Object.assign({}, p)),
   'hy-icon-date': (p) => h(icons.Date, Object.assign({}, p)),
-  'hy-icon-dot-arrow-right': (p) => h(icons.DotArrowRight, Object.assign({}, p)),
+  'hy-icon-discover': (p) => h(icons.Discover, Object.assign({}, p)),
   'hy-icon-done': (p) => h(icons.Done, Object.assign({}, p)),
+  'hy-icon-dot': (p) => h(icons.Dot, Object.assign({}, p)),
+  'hy-icon-dot-arrow-right': (p) => h(icons.DotArrowRight, Object.assign({}, p)),
+  'hy-icon-download': (p) => h(icons.Download, Object.assign({}, p)),
+  'hy-icon-drag': (p) => h(icons.Drag, Object.assign({}, p)),
+  'hy-icon-drag-button': (p) => h(icons.Dragbutton, Object.assign({}, p)),
+  'hy-icon-drop-down': (p) => h(icons.DropDown, Object.assign({}, p)),
+  'hy-icon-edit': (p) => h(icons.Edit, Object.assign({}, p)),
+  'hy-icon-edit-event': (p) => h(icons.EditEvent, Object.assign({}, p)),
+  'hy-icon-embed': (p) => h(icons.Embed, Object.assign({}, p)),
   'hy-icon-euro': (p) => h(icons.Euro, Object.assign({}, p)),
+  'hy-icon-events': (p) => h(icons.Events, Object.assign({}, p)),
+  'hy-icon-external-link': (p) => h(icons.ExternalLink, Object.assign({}, p)),
+  'hy-icon-eyelash': (p) => h(icons.EyeSlash, Object.assign({}, p)),
+  'hy-icon-facebook': (p) => h(icons.Facebook, Object.assign({}, p)),
+  'hy-icon-favorites': (p) => h(icons.Favorites, Object.assign({}, p)),
+  'hy-icon-feed': (p) => h(icons.Feed, Object.assign({}, p)),
   'hy-icon-file-text': (p) => h(icons.FileText, Object.assign({}, p)),
-  'hy-icon-heart': (p) => h(icons.Heart, Object.assign({}, p)),
-  'hy-icon-heart-support': (p) => h(icons.HeartSupport, Object.assign({}, p)),
-  'hy-icon-link': (p) => h(icons.Url, Object.assign({}, p)),
-  'hy-icon-location': (p) => h(icons.Location, Object.assign({}, p)),
+  'hy-icon-fullscreen': (p) => h(icons.FullScreen, Object.assign({}, p)),
   'hy-icon-globe': (p) => h(icons.Globe, Object.assign({}, p)),
+  'hy-icon-googleplus': (p) => h(icons.GooglePlus, Object.assign({}, p)),
+  'hy-icon-grid': (p) => h(icons.Grid, Object.assign({}, p)),
   'hy-icon-hamburger': (p) => h(icons.Hamburger, Object.assign({}, p)),
-  'hy-icon-home': (p) => h(icons.Home, Object.assign({}, p)),
+  'hy-icon-heart': (p) => h(icons.Heart, Object.assign({}, p)),
+  'hy-icon-heart-support': (p) => h(icons.HeartSupport, Object.assign({}, p)),
   'hy-icon-helsingin-yliopisto': (p) => h(icons.Helsinginyliopisto, Object.assign({}, p)),
-  'hy-icon-email': (p) => h(icons.Mail, Object.assign({}, p)),
-  'hy-icon-embed': (p) => h(icons.Embed, Object.assign({}, p)),
-  'hy-icon-events': (p) => h(icons.Events, Object.assign({}, p)),
-  'hy-icon-edit-event': (p) => h(icons.EditEvent, Object.assign({}, p)),
-  'hy-icon-info': (p) => h(icons.Info, Object.assign({}, p)),
-  'hy-icon-notification': (p) => h(icons.Notification, Object.assign({}, p)),
-  'hy-icon-phone': (p) => h(icons.Phone, Object.assign({}, p)),
+  'hy-icon-home': (p) => h(icons.Home, Object.assign({}, p)),
+  'hy-icon-horizontal-resize': (p) => h(icons.HorizontalResize, Object.assign({}, p)),
   'hy-icon-hy-logo': (p) => h(icons.HyLogo, Object.assign({}, p)),
+  'hy-icon-id-number': (p) => h(icons.IdNumber, Object.assign({}, p)),
+  'hy-icon-image': (p) => h(icons.Image, Object.assign({}, p)),
   'hy-icon-image-gallery': (p) => h(icons.ImageGallery, Object.assign({}, p)),
+  'hy-icon-images': (p) => h(icons.Images, Object.assign({}, p)),
+  'hy-icon-info': (p) => h(icons.Info, Object.assign({}, p)),
+  'hy-icon-info-stroke': (p) => h(icons.InfoStroke, Object.assign({}, p)),
+  'hy-icon-instagram': (p) => h(icons.Instagram, Object.assign({}, p)),
+  'hy-icon-leiki-list': (p) => h(icons.LeikiList, Object.assign({}, p)),
+  'hy-icon-link-arrow': (p) => h(icons.LinkArrow, Object.assign({}, p)),
   'hy-icon-link-arrow-down': (p) => h(icons.LinkArrowDown, Object.assign({}, p)),
+  'hy-icon-link-arrow-left': (p) => h(icons.LinkArrowLeft, Object.assign({}, p)),
+  'hy-icon-link-arrow-offsite': (p) => h(icons.LinkArrowOffsite, Object.assign({}, p)),
+  'hy-icon-link-arrow-up': (p) => h(icons.LinkArrowUp, Object.assign({}, p)),
+  'hy-icon-linkedin': (p) => h(icons.Linkedin, Object.assign({}, p)),
+  'hy-icon-list': (p) => h(icons.List, Object.assign({}, p)),
+  'hy-icon-list-of-links': (p) => h(icons.Listoflinks, Object.assign({}, p)),
+  'hy-icon-list-as-blocks': (p) => h(icons.ListAsBlocks, Object.assign({}, p)),
   'hy-icon-list-style-grid': (p) => h(icons.ListStyleGrid, Object.assign({}, p)),
   'hy-icon-list-style-list': (p) => h(icons.ListStyleList, Object.assign({}, p)),
+  'hy-icon-link': (p) => h(icons.Url, Object.assign({}, p)),
+  'hy-icon-location': (p) => h(icons.Location, Object.assign({}, p)),
+  'hy-icon-log': (p) => h(icons.Log, Object.assign({}, p)),
+  'hy-icon-log-in': (p) => h(icons.Login, Object.assign({}, p)),
+  'hy-icon-log-out': (p) => h(icons.Logout, Object.assign({}, p)),
+  'hy-icon-magnify-minus': (p) => h(icons.MagnifyMinus, Object.assign({}, p)),
+  'hy-icon-magnify-plus': (p) => h(icons.MagnifyPlus, Object.assign({}, p)),
+  'hy-icon-email': (p) => h(icons.Mail, Object.assign({}, p)),
+  'hy-icon-master': (p) => h(icons.Master, Object.assign({}, p)),
   'hy-icon-minus': (p) => h(icons.Minus, Object.assign({}, p)),
-  'hy-icon-play': (p) => h(icons.Play, Object.assign({}, p)),
+  'hy-icon-modify': (p) => h(icons.Modify, Object.assign({}, p)),
+  'hy-icon-navi-triangle': (p) => h(icons.NaviTriangle, Object.assign({}, p)),
+  'hy-icon-new-group': (p) => h(icons.NewGroup, Object.assign({}, p)),
+  'hy-icon-new-person': (p) => h(icons.NewPerson, Object.assign({}, p)),
+  'hy-icon-notification': (p) => h(icons.Notification, Object.assign({}, p)),
+  'hy-icon-opinder-logo': (p) => h(icons.OpinderLogoNew, Object.assign({}, p)),
+  'hy-icon-pdf': (p) => h(icons.Pdf, Object.assign({}, p)),
   'hy-icon-people': (p) => h(icons.People, Object.assign({}, p)),
+  'hy-icon-permission-all': (p) => h(icons.PermissionAll, Object.assign({}, p)),
+  'hy-icon-permission-group': (p) => h(icons.PermissionGroup, Object.assign({}, p)),
+  'hy-icon-permission-private': (p) => h(icons.PermissionPrivate, Object.assign({}, p)),
+  'hy-icon-person': (p) => h(icons.Person, Object.assign({}, p)),
+  'hy-icon-person-outline': (p) => h(icons.PersonOutline, Object.assign({}, p)),
+  'hy-icon-phone': (p) => h(icons.Phone, Object.assign({}, p)),
+  'hy-icon-play': (p) => h(icons.Play, Object.assign({}, p)),
   'hy-icon-plus': (p) => h(icons.Plus, Object.assign({}, p)),
-  'hy-icon-quote': (p) => h(icons.IconQuote, Object.assign({}, p)),
+  'hy-icon-preview': (p) => h(icons.Preview, Object.assign({}, p)),
+  'hy-icon-profile': (p) => h(icons.Profile, Object.assign({}, p)),
+  'hy-icon-question': (p) => h(icons.Question, Object.assign({}, p)),
   'hy-icon-remove': (p) => h(icons.Remove, Object.assign({}, p)),
+  'hy-icon-retweet': (p) => h(icons.Retweet, Object.assign({}, p)),
+  'hy-icon-rotate-left': (p) => h(icons.RotateLeft, Object.assign({}, p)),
+  'hy-icon-rotate-right': (p) => h(icons.RotateRight, Object.assign({}, p)),
   'hy-icon-search': (p) => h(icons.Search, Object.assign({}, p)),
+  'hy-icon-share': (p) => h(icons.Share, Object.assign({}, p)),
   'hy-icon-slim-hamburger-menu': (p) => h(icons.SlimHamburgerMenu, Object.assign({}, p)),
+  'hy-icon-social-media': (p) => h(icons.SocialMedia, Object.assign({}, p)),
   'hy-icon-some-facebook': (p) => h(icons.SomeFacebook, Object.assign({}, p)),
   'hy-icon-some-instagram': (p) => h(icons.SomeInstagram, Object.assign({}, p)),
   'hy-icon-some-linkedin': (p) => h(icons.SomeLinkedin, Object.assign({}, p)),
@@ -56,8 +118,19 @@ const iconNames = {
   'hy-icon-some-twitter-retweet': (p) => h(icons.SomeTwitterRetweet, Object.assign({}, p)),
   'hy-icon-some-twitter-like': (p) => h(icons.SomeTwitterLike, Object.assign({}, p)),
   'hy-icon-some-youtube': (p) => h(icons.SomeYoutube, Object.assign({}, p)),
+  'hy-icon-spinner': (p) => h(icons.Spinner, Object.assign({}, p)),
+  'hy-icon-square': (p) => h(icons.Square, Object.assign({}, p)),
+  'hy-icon-square-checked': (p) => h(icons.SquareChecked, Object.assign({}, p)),
+  'hy-icon-time': (p) => h(icons.Time, Object.assign({}, p)),
+  'hy-icon-todolist': (p) => h(icons.TodoList, Object.assign({}, p)),
+  'hy-icon-tour': (p) => h(icons.Tour, Object.assign({}, p)),
+  'hy-icon-twitter': (p) => h(icons.Twitter, Object.assign({}, p)),
   'hy-icon-units-and-faculties': (p) => h(icons.UnitsAndFaculties, Object.assign({}, p)),
   'hy-icon-video': (p) => h(icons.Video, Object.assign({}, p)),
+  'hy-icon-warning': (p) => h(icons.Warning, Object.assign({}, p)),
+  'hy-icon-wrench': (p) => h(icons.Wrench, Object.assign({}, p)),
+  'hy-icon-quote': (p) => h(icons.IconQuote, Object.assign({}, p)),
+  'hy-icon-youtube': (p) => h(icons.Youtube, Object.assign({}, p)),
 };
 export class Icon {
   constructor() {

package/dist/collection/components/image/image.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/ingress/ingress.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/link/link.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/link-box/link-box.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/link-box-list/link-box-list.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/navigation/hy-menu-main-group/hy-menu-main-group.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/navigation/hy-menu-main-group/hy-menu-main-group.js

@@ -140,7 +140,7 @@ export class HyMenuMainGroup {
       h("button", { class: {
           'menu--main-group__toggle': true,
           'is-open': this.isMenuOpen,
-        } },
+        }, "aria-expanded": this.isMenuOpen ? 'true' : 'false', "aria-haspopup": "menu" },
         this.isMenuOpen ? (h("hy-icon", { class: 'toggle__close', icon: 'hy-icon-remove', size: 8, fill: white })) : (h("hy-icon", { class: 'toggle__caret', icon: 'hy-icon-slim-hamburger-menu', size: 8, fill: white })),
         h("span", null, this.menuLabel)),
       h("div", { class: {

package/dist/collection/components/navigation/menu-language/menu-language.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/navigation/menu-language/menu-language.js

@@ -66,7 +66,7 @@ export class MenuLanguage {
       } },
       h("button", { class: {
           'menu-language__toggle': true,
-        }, "aria-label": this.isMenuOpen ? this._labels['close'] : this._labels['open'], "aria-expanded": `${this.isMenuOpen}` },
+        }, "aria-label": this.isMenuOpen ? this._labels['close'] : this._labels['open'] },
         h("hy-icon", { icon: 'hy-icon-globe', size: globeIconSize, fill: svgColor }),
         h("span", null, this._dataMenuLanguage.map(({ isActive, langCode }) => {
           if (isActive) {

package/dist/collection/components/navigation/menu-language-item/menu-language-item.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/navigation/menu-language-item/menu-language-item.js

@@ -6,7 +6,7 @@ export class SiteLanguage {
   }
   render() {
     return (h("li", { class: `menu-language__links-item` },
-      h("a", { href: this.url, class: {
+      h("a", { href: this.url, lang: this.langCode, class: {
           'is-active': this.isActive,
           'is-disabled': this.isDisabled,
           'menu-language__link': true,

package/dist/collection/components/pagination/hy-pager/hy-pager.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/pagination/hy-pager-item/hy-pager-item.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/paragraph-text/paragraph-text-content.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/paragraph-text/paragraph-text-landing.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/paragraph-text/paragraph-text.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/person-profile/person-profile-listing/person-profile-listing.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/person-profile/person-profile.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/process/process.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/process-flow-box/process-flow-box.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

package/dist/collection/components/section-container/section-container.css

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

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

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;
@@ -64,6 +65,16 @@
   background-color: var(--grayscale-white);
   z-index: 100;
   border-bottom: 2px solid var(--grayscale-dark);
+  -webkit-transform: none;
+  transform: none;
+}
+
+.hy-site-header:not(.is-at-top) {
+  top: 0;
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 @media (min-width: 75.0625rem) {
@@ -75,16 +86,8 @@
 }
 
 .hy-site-header.hy-site-header--sticky-active {
-  -webkit-transition: -webkit-transform 200ms linear;
-  transition: -webkit-transform 200ms linear;
-  transition: transform 200ms linear;
-  transition: transform 200ms linear, -webkit-transform 200ms linear;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-property: -webkit-transform;
-  transition-property: -webkit-transform;
-  transition-property: transform;
-  transition-property: transform, -webkit-transform;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
   -webkit-box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
   box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
 }
@@ -94,6 +97,17 @@
   position: fixed;
   right: 0;
   top: 0;
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+
+.hy-site-header.hy-site-header--sticky-visible.hy-site-header--mobile {
+  -webkit-transform: none;
+  transform: none;
 }
 
 .hy-site-header.hy-site-header--sticky-visible.has-toolbar {
@@ -414,18 +428,18 @@
   width: 0;
 }
 
+body:not(.sticky-active) {
+  padding-top: 0;
+  -webkit-transition: padding-top 0.2s ease-in-out;
+  transition: padding-top 0.2s ease-in-out;
+}
+
 @media (min-width: 75.0625rem) {
   .sticky-active {
     padding-top: var(--nav-height, 120px);
-    -webkit-transition: -webkit-transform 200ms linear;
-    transition: -webkit-transform 200ms linear;
-    transition: transform 200ms linear;
-    transition: transform 200ms linear, -webkit-transform 200ms linear;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    -webkit-transition-property: -webkit-transform;
-    transition-property: -webkit-transform;
-    transition-property: transform;
-    transition-property: transform, -webkit-transform;
+    -webkit-transition: padding-top 0.2s ease-in-out;
+    transition: padding-top 0.2s ease-in-out;
+    -webkit-transition-delay: 0.2s;
+    transition-delay: 0.2s;
   }
 }

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

@@ -1,11 +1,9 @@
 let clickTimer = null;
-let scrollTimer = null;
 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';
 let clickTimeout = null;
-let scrollTimeout = null;
 export class SiteHeader {
   constructor() {
     this.isGroup = false;
@@ -22,12 +20,10 @@ export class SiteHeader {
     this.isDesktopMenuOpen = false;
     this.isDesktopMenuDropdown = false;
     this.isTopMenuOpen = false;
+    this.isBottomVisible = false;
     this.lastScrollTop = 0;
     this.delta = 5;
     this.navbarHeight = 0;
-    this.check = () => window.requestAnimationFrame(() => {
-      this.hasScrolled();
-    });
   }
   // Listener for toggling mobile menu panel on or off.
   mobileMenuToggle() {
@@ -47,10 +43,7 @@ export class SiteHeader {
     this.menuMobileTopToggled.emit();
   }
   handleScroll() {
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(() => {
-      this.check();
-    }, 50);
+    this.hasScrolled();
   }
   componentDidLoad() {
     // Set the browser resize observer to gather information about browser width.
@@ -60,9 +53,18 @@ export class SiteHeader {
       }
     });
     this.ro.observe(document.body);
+    this.io = new IntersectionObserver((entries) => {
+      this.isBottomVisible = entries[0].isIntersecting ? true : false;
+    });
+    const footer = document.querySelector('hy-footer');
+    if (footer) {
+      this.io.observe(footer);
+    }
     // Pass the dataMenuLanguage prop to menu component.
     this.el.children[0].setAttribute('data-menu-language', this.dataMenuLanguage);
     this.navbarHeight = 120;
+    const body = document.querySelector('body');
+    body.style.setProperty('--nav-height', `${this.navbarHeight * 2}px`);
   }
   async componentWillLoad() {
     // Check for site header labels and set them to variables accordingly.
@@ -94,29 +96,21 @@ export class SiteHeader {
     if (this.groupType !== '') {
       this.isDesktopMenuDropdown = true;
     }
-    const body = document.querySelector('body');
-    body.style.setProperty('--nav-height', `${this.navbarHeight * 2}px`);
   }
   hasScrolled() {
     let topOffset = window.pageYOffset;
     const bodyElementClasses = document.querySelector('body').classList;
-    const body = document.querySelector('body');
-    body.style.setProperty('--nav-height', `${this.navbarHeight * 2}px`);
-    if (bodyElementClasses.contains('hy-menu-sidepanel__no-scroll') ||
-      bodyElementClasses.contains('hy-menu-sidebar__no-scroll')) {
-      return;
-    }
     if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
       return;
     }
     let hySiteHeader = this.el.querySelector('.hy-site-header');
     if (!hySiteHeader)
       return;
+    topOffset < 140 ? hySiteHeader.classList.add('is-at-top') : hySiteHeader.classList.remove('is-at-top');
     // If current position > last position AND scrolled past navbar...
     if (topOffset > this.lastScrollTop && topOffset > this.navbarHeight) {
       // Scroll Down
-      hySiteHeader.classList.remove('hy-site-header--sticky-visible');
-      hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
+      hySiteHeader.classList.remove('hy-site-header--sticky-visible', 'has-toolbar', 'has-toolbar--large');
       bodyElementClasses.remove('sticky-active');
       // Close Search panel
       //CludoSayt.hide();
@@ -125,18 +119,14 @@ export class SiteHeader {
     else {
       // Scroll Up
       if (topOffset <= this.navbarHeight) {
-        hySiteHeader.classList.remove('hy-site-header--sticky-active');
-        hySiteHeader.classList.remove('hy-site-header--sticky-visible');
-        hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
-        hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
+        hySiteHeader.classList.remove('hy-site-header--sticky-active', 'hy-site-header--sticky-visible', 'hy-site-header--sticky-hidden', 'has-toolbar', 'has-toolbar--large');
         bodyElementClasses.remove('sticky-active');
         // Close desktop menu panel if it's open.
       }
       else {
-        hySiteHeader.classList.add('hy-site-header--sticky-active');
+        hySiteHeader.classList.add('hy-site-header--sticky-active', 'hy-site-header--sticky-visible');
         hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
-        hySiteHeader.classList.add('hy-site-header--sticky-visible');
-        bodyElementClasses.add('sticky-active');
+        !this.isBottomVisible && bodyElementClasses.add('sticky-active');
         if (bodyElementClasses.contains('toolbar-horizontal')) {
           hySiteHeader.classList.add('has-toolbar');
           if (bodyElementClasses.contains('toolbar-tray-open')) {
@@ -149,19 +139,13 @@ export class SiteHeader {
   }
   disconnectedCallback() {
     clearTimeout(clickTimer);
-    clearTimeout(scrollTimer);
     this.ro.disconnect();
-    clearTimeout(scrollTimeout);
+    this.io.disconnect();
     clearTimeout(clickTimeout);
   }
   applySizeClasses(size) {
     // Set the menu-type based on the width of the browser.
-    if (size <= 1200) {
-      this.menuType = MenuType.mobile;
-    }
-    else {
-      this.menuType = MenuType.desktop;
-    }
+    size <= 1200 ? (this.menuType = MenuType.mobile) : (this.menuType = MenuType.desktop);
     // Pass the menu type to menu component.
     this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);
     const menuAttribute = this.menuType;
@@ -175,7 +159,12 @@ export class SiteHeader {
     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}`, this.isGroup ? 'is-group' : ''];
+    let classAttributes = [
+      'hy-site-header',
+      `hy-site-header--${this.menuType}`,
+      this.isGroup ? 'is-group' : '',
+      'is-at-top',
+    ];
     const toggleMenuMobileAndRemoveListener = () => {
       window.removeEventListener('click', handleClickOutside);
       this.mobileMenuToggle();
@@ -682,6 +671,7 @@ export class SiteHeader {
     "isDesktopMenuOpen": {},
     "isDesktopMenuDropdown": {},
     "isTopMenuOpen": {},
+    "isBottomVisible": {},
     "lastScrollTop": {},
     "delta": {},
     "navbarHeight": {}

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

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;

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

@@ -22,7 +22,8 @@
   --additional-red-light: #e5053a;
   --additional-red-dark: #a31621;
   --additional-purple-light: #420039;
-  --additional-yellow: #f9a21a;
+  --additional-yellow-light: #f9a21a;
+  --additional-yellow: #c47f1b;
   --additional-skyblue: #48c5f8;
   --additional-orange: #d14600;
   --additional-green-light: #96ba3c;