@itcenteratunihelsinki/huds-lib 0.7.4 → 0.7.6

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;

package/dist/collection/components/tiny-text/tiny-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/esm/color-box_8.entry.js

@@ -37,7 +37,7 @@ const colors = {
   additionalGreenDark: '#006400'
 };
 
-const buttonCss = "@charset \"UTF-8\";:root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}.hy-button__icon{-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-button{display:block;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main);color:var(--grayscale-white);font-family:var(--main-font-family);border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.9375rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:0.9375rem;margin:0;padding:0;-webkit-transition-duration:0.1s;transition-duration:0.1s;-webkit-transition-property:all;transition-property:all;min-height:44px;position:relative;text-decoration:none}.hy-button.size-large{min-height:48px}.hy-button.primary{background-color:var(--brand-main);color:var(--grayscale-white)}.hy-button.primary .hy-button__icon{padding:8px 13px}.hy-button.primary svg{fill:var(--grayscale-white)}.hy-button.primary:hover{background-color:var(--brand-main-active)}.hy-button.primary:active{background-color:var(--brand-main-dark)}.hy-button.primary:disabled{background-color:var(--grayscale-medium);color:var(--grayscale-dark)}.hy-button.primary:disabled svg{fill:var(--grayscale-dark)}.hy-button.primary:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-button.secondary{background-color:transparent;border:solid 2px var(--brand-main);color:var(--brand-main)}.hy-button.secondary svg{fill:var(--brand-main)}.hy-button.secondary:hover{border:solid 2px var(--brand-main-active);color:var(--brand-main-active)}.hy-button.secondary:hover svg{fill:var(--brand-main-active)}.hy-button.secondary:active{border:solid 2px var(--brand-main-dark);color:var(--brand-main-dark)}.hy-button.secondary:active svg{fill:var(--brand-main-dark)}.hy-button.secondary:disabled{border:solid 2px var(--grayscale-medium-dark);color:var(--grayscale-medium-dark)}.hy-button.secondary:disabled svg{fill:var(--grayscale-medium-dark)}.hy-button::after{content:\"\";display:block;border-bottom:2px solid var(--additional-skyblue);position:absolute;bottom:-3.5px;left:3px;right:3px;z-index:0}.hy-button.primary::after{bottom:-2px}.hy-button:disabled{cursor:not-allowed}.hy-button:disabled::after{border-bottom:2px solid var(--grayscale-medium-dark);bottom:-3.5px}.hy-button:disabled.primary::after{bottom:-2px}.hy-button .hy-button__text{margin:12px 24px}.hy-button .hy-button__icon-right{padding-right:12px}hy-button[icon-right=hy-icon-arrow-right] .primary .hy-button__text{margin:12px 0 12px 16px;padding-right:16px}hy-button[icon-right=hy-icon-arrow-right] .primary:not(disabled) .hy-button__text{border-right:solid 1px var(--additional-skyblue)}hy-button[icon-right=hy-icon-arrow-right] .primary:disabled .hy-button__text{border-right:solid 1px var(--grayscale-dark)}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__text{margin:12px 16px}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__icon{padding-right:1rem;padding-left:0}hy-button[icon=hy-icon-arrow-left] .primary .hy-button__text{margin:12px 16px 12px 0;padding-left:16px}hy-button[icon=hy-icon-arrow-left] .primary:not(disabled) .hy-button__text{border-left:solid 1px var(--additional-skyblue)}hy-button[icon=hy-icon-arrow-left] .primary:disabled .hy-button__text{border-left:solid 1px var(--grayscale-dark)}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__text{margin:12px 16px}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__icon{padding-left:1rem;padding-right:0}";
+const buttonCss = "@charset \"UTF-8\";:root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}.hy-button__icon{-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-button{display:block;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main);color:var(--grayscale-white);font-family:var(--main-font-family);border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.9375rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:0.9375rem;margin:0;padding:0;-webkit-transition-duration:0.1s;transition-duration:0.1s;-webkit-transition-property:all;transition-property:all;min-height:44px;position:relative;text-decoration:none}.hy-button.size-large{min-height:48px}.hy-button.primary{background-color:var(--brand-main);color:var(--grayscale-white)}.hy-button.primary .hy-button__icon{padding:8px 13px}.hy-button.primary svg{fill:var(--grayscale-white)}.hy-button.primary:hover{background-color:var(--brand-main-active)}.hy-button.primary:active{background-color:var(--brand-main-dark)}.hy-button.primary:disabled{background-color:var(--grayscale-medium);color:var(--grayscale-dark)}.hy-button.primary:disabled svg{fill:var(--grayscale-dark)}.hy-button.primary:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-button.secondary{background-color:transparent;border:solid 2px var(--brand-main);color:var(--brand-main)}.hy-button.secondary svg{fill:var(--brand-main)}.hy-button.secondary:hover{border:solid 2px var(--brand-main-active);color:var(--brand-main-active)}.hy-button.secondary:hover svg{fill:var(--brand-main-active)}.hy-button.secondary:active{border:solid 2px var(--brand-main-dark);color:var(--brand-main-dark)}.hy-button.secondary:active svg{fill:var(--brand-main-dark)}.hy-button.secondary:disabled{border:solid 2px var(--grayscale-medium-dark);color:var(--grayscale-medium-dark)}.hy-button.secondary:disabled svg{fill:var(--grayscale-medium-dark)}.hy-button::after{content:\"\";display:block;border-bottom:2px solid var(--additional-skyblue);position:absolute;bottom:-3.5px;left:3px;right:3px;z-index:0}.hy-button.primary::after{bottom:-2px}.hy-button:disabled{cursor:not-allowed}.hy-button:disabled::after{border-bottom:2px solid var(--grayscale-medium-dark);bottom:-3.5px}.hy-button:disabled.primary::after{bottom:-2px}.hy-button .hy-button__text{margin:12px 24px}.hy-button .hy-button__icon-right{padding-right:12px}hy-button[icon-right=hy-icon-arrow-right] .primary .hy-button__text{margin:12px 0 12px 16px;padding-right:16px}hy-button[icon-right=hy-icon-arrow-right] .primary:not(disabled) .hy-button__text{border-right:solid 1px var(--additional-skyblue)}hy-button[icon-right=hy-icon-arrow-right] .primary:disabled .hy-button__text{border-right:solid 1px var(--grayscale-dark)}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__text{margin:12px 16px}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__icon{padding-right:1rem;padding-left:0}hy-button[icon=hy-icon-arrow-left] .primary .hy-button__text{margin:12px 16px 12px 0;padding-left:16px}hy-button[icon=hy-icon-arrow-left] .primary:not(disabled) .hy-button__text{border-left:solid 1px var(--additional-skyblue)}hy-button[icon=hy-icon-arrow-left] .primary:disabled .hy-button__text{border-left:solid 1px var(--grayscale-dark)}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__text{margin:12px 16px}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__icon{padding-left:1rem;padding-right:0}";
 
 const fillcolors = {
   primary: colors.brandMain,
@@ -122,7 +122,7 @@ let DocsContainer = class {
 };
 DocsContainer.style = docsContainerCss;
 
-const gridContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-grid--container{width:100%}}@media only screen and (min-width: 60rem){.hy-grid--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-grid--container{width:100%;max-width:75rem}}@media only screen and (min-width: 1601px){.hy-grid--container{width:100%;max-width:90rem}}";
+const gridContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-grid--container{width:100%}}@media only screen and (min-width: 60rem){.hy-grid--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-grid--container{width:100%;max-width:75rem}}@media only screen and (min-width: 1601px){.hy-grid--container{width:100%;max-width:90rem}}";
 
 let GridContainer = class {
   constructor(hostRef) {
@@ -135,7 +135,7 @@ let GridContainer = class {
 };
 GridContainer.style = gridContainerCss;
 
-const gridItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid-align__left{text-align:left}.hy-grid-align__right{text-align:right}.hy-grid-align__center{text-align:center;margin-left:auto;margin-right:auto}.hy-grid-justify{text-align:justify}.hy-grid-hidden-sm{display:none}.hy-grid__col-1,.hy-grid__col-2,.hy-grid__col-3,.hy-grid__col-4,.hy-grid__col-5,.hy-grid__col-6,.hy-grid__col-7,.hy-grid__col-8,.hy-grid__col-9,.hy-grid__col-10,.hy-grid__col-11,.hy-grid__col-12{width:98%}.hy-grid__col-1-sm{width:6.3333333333%}.hy-grid__col-2-sm{width:14.6666666667%}.hy-grid__col-3-sm{width:23%}.hy-grid__col-4-sm{width:31.3333333333%}.hy-grid__col-5-sm{width:39.6666666667%}.hy-grid__col-6-sm{width:48%}.hy-grid__col-7-sm{width:56.3333333333%}.hy-grid__col-8-sm{width:64.6666666667%}.hy-grid__col-9-sm{width:73%}.hy-grid__col-10-sm{width:81.3333333333%}.hy-grid__col-11-sm{width:89.6666666667%}.hy-grid__col-12-sm{width:98%}@media only screen and (min-width: 48em){.hy-grid__col-1{width:6.3333333333%}.hy-grid__col-2{width:14.6666666667%}.hy-grid__col-3{width:23%}.hy-grid__col-4{width:31.3333333333%}.hy-grid__col-5{width:39.6666666667%}.hy-grid__col-6{width:48%}.hy-grid__col-7{width:56.3333333333%}.hy-grid__col-8{width:64.6666666667%}.hy-grid__col-9{width:73%}.hy-grid__col-10{width:81.3333333333%}.hy-grid__col-11{width:89.6666666667%}.hy-grid__col-12{width:98%}.hidden-sm{display:block}}@media only screen and (min-width: 60em){.hy-grid__col-1-lg{width:6.3333333333%}.hy-grid__col-2-lg{width:14.6666666667%}.hy-grid__col-3-lg{width:23%}.hy-grid__col-4-lg{width:31.3333333333%}.hy-grid__col-5-lg{width:39.6666666667%}.hy-grid__col-6-lg{width:48%}.hy-grid__col-7-lg{width:56.3333333333%}.hy-grid__col-8-lg{width:64.6666666667%}.hy-grid__col-9-lg{width:73%}.hy-grid__col-10-lg{width:81.3333333333%}.hy-grid__col-11-lg{width:89.6666666667%}.hy-grid__col-12-lg{width:98%}}";
+const gridItemCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid-align__left{text-align:left}.hy-grid-align__right{text-align:right}.hy-grid-align__center{text-align:center;margin-left:auto;margin-right:auto}.hy-grid-justify{text-align:justify}.hy-grid-hidden-sm{display:none}.hy-grid__col-1,.hy-grid__col-2,.hy-grid__col-3,.hy-grid__col-4,.hy-grid__col-5,.hy-grid__col-6,.hy-grid__col-7,.hy-grid__col-8,.hy-grid__col-9,.hy-grid__col-10,.hy-grid__col-11,.hy-grid__col-12{width:98%}.hy-grid__col-1-sm{width:6.3333333333%}.hy-grid__col-2-sm{width:14.6666666667%}.hy-grid__col-3-sm{width:23%}.hy-grid__col-4-sm{width:31.3333333333%}.hy-grid__col-5-sm{width:39.6666666667%}.hy-grid__col-6-sm{width:48%}.hy-grid__col-7-sm{width:56.3333333333%}.hy-grid__col-8-sm{width:64.6666666667%}.hy-grid__col-9-sm{width:73%}.hy-grid__col-10-sm{width:81.3333333333%}.hy-grid__col-11-sm{width:89.6666666667%}.hy-grid__col-12-sm{width:98%}@media only screen and (min-width: 48em){.hy-grid__col-1{width:6.3333333333%}.hy-grid__col-2{width:14.6666666667%}.hy-grid__col-3{width:23%}.hy-grid__col-4{width:31.3333333333%}.hy-grid__col-5{width:39.6666666667%}.hy-grid__col-6{width:48%}.hy-grid__col-7{width:56.3333333333%}.hy-grid__col-8{width:64.6666666667%}.hy-grid__col-9{width:73%}.hy-grid__col-10{width:81.3333333333%}.hy-grid__col-11{width:89.6666666667%}.hy-grid__col-12{width:98%}.hidden-sm{display:block}}@media only screen and (min-width: 60em){.hy-grid__col-1-lg{width:6.3333333333%}.hy-grid__col-2-lg{width:14.6666666667%}.hy-grid__col-3-lg{width:23%}.hy-grid__col-4-lg{width:31.3333333333%}.hy-grid__col-5-lg{width:39.6666666667%}.hy-grid__col-6-lg{width:48%}.hy-grid__col-7-lg{width:56.3333333333%}.hy-grid__col-8-lg{width:64.6666666667%}.hy-grid__col-9-lg{width:73%}.hy-grid__col-10-lg{width:81.3333333333%}.hy-grid__col-11-lg{width:89.6666666667%}.hy-grid__col-12-lg{width:98%}}";
 
 let GridItem = class {
   constructor(hostRef) {
@@ -158,7 +158,7 @@ let GridItem = class {
 };
 GridItem.style = gridItemCss;
 
-const gridRowCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid__row{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;width:100%}.hy-grid__row>[class^=hy-grid-item]{float:left;margin:0.5rem 1%;min-height:0.125rem}@media (min-width: 30rem){.hy-grid__row>[class^=hy-grid-item]{margin:1%}}.hy-grid__row::after{content:\"\";display:table;clear:both}";
+const gridRowCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-grid__row{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;width:100%}.hy-grid__row>[class^=hy-grid-item]{float:left;margin:0.5rem 1%;min-height:0.125rem}@media (min-width: 30rem){.hy-grid__row>[class^=hy-grid-item]{margin:1%}}.hy-grid__row::after{content:\"\";display:table;clear:both}";
 
 let GridRow = class {
   constructor(hostRef) {
@@ -171,7 +171,7 @@ let GridRow = class {
 };
 GridRow.style = gridRowCss;
 
-const sectionContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-section--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-section--container{width:100%}}@media only screen and (min-width: 60rem){.hy-section--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-section--container{width:100%;max-width:75rem}}";
+const sectionContainerCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-section--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-section--container{width:100%}}@media only screen and (min-width: 60rem){.hy-section--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-section--container{width:100%;max-width:75rem}}";
 
 let SectionContainer = class {
   constructor(hostRef) {
@@ -183,7 +183,7 @@ let SectionContainer = class {
 };
 SectionContainer.style = sectionContainerCss;
 
-const tinyTextCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow:#f9a21a;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tiny-text{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px}";
+const tinyTextCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tiny-text{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px}";
 
 let TinyText = class {
   constructor(hostRef) {