@itcenteratunihelsinki/huds-lib 0.5.45 → 0.5.46

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

@@ -1,6 +1,8 @@
 import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
 import { MenuType } from '../../../utils/utils';
 import { jsonParserWorker } from '../../../global/globalScript';
+let breadcrumbTimeout = null;
+let addbreadTimeout = null;
 export class Menu {
   constructor() {
     this.isGroup = false;
@@ -10,49 +12,59 @@ export class Menu {
   }
   // Listener for removing a breadcrumb from mobile menu breadcrumbs.
   async removeBreadcrumb(data) {
+    clearTimeout(breadcrumbTimeout);
     let breadcrumbs = await jsonParserWorker(this.breadcrumbs);
-    let currentBreadcrumb = breadcrumbs
-      .map(function (e) {
-      return e.bid;
-    })
-      .indexOf(data.detail.bid);
-    for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
-      this.menuContainerToggled.emit({
-        triggerItem: this.breadcrumbs[i].bid,
-        triggerType: 'remove',
-      });
-    }
-    this.breadcrumbs = [];
-    this.breadcrumbs = breadcrumbs.slice(0, -1);
-    // Reset if home breadcrumb link has been clicked.
-    if (currentBreadcrumb === 0) {
+    breadcrumbTimeout = setTimeout(() => {
+      let currentBreadcrumb = breadcrumbs
+        .map(function (e) {
+        return e.bid;
+      })
+        .indexOf(data.detail.bid);
+      for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
+        this.menuContainerToggled.emit({
+          triggerItem: this.breadcrumbs[i].bid,
+          triggerType: 'remove',
+        });
+      }
       this.breadcrumbs = [];
-      // Notify menu-level-container toggle listener about closing all levels.
-      let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
-      elements.forEach((element) => {
-        if (!element.classList.contains('hy-menu-level-container--level-0')) {
-          this.menuContainerToggled.emit({
-            triggerItem: element.getAttribute('trigger-item'),
-            triggerType: 'remove',
-          });
-        }
-      });
-    }
+      this.breadcrumbs = breadcrumbs.slice(0, -1);
+      // Reset if home breadcrumb link has been clicked.
+      if (currentBreadcrumb === 0) {
+        this.breadcrumbs = [];
+        // Notify menu-level-container toggle listener about closing all levels.
+        let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
+        elements.forEach((element) => {
+          if (!element.classList.contains('hy-menu-level-container--level-0')) {
+            this.menuContainerToggled.emit({
+              triggerItem: element.getAttribute('trigger-item'),
+              triggerType: 'remove',
+            });
+          }
+        });
+      }
+    }, 100);
   }
   // Listener for adding a breadcrumb to mobile menu breadcrumbs.
   addBreadcrumb(event) {
-    this.breadcrumbs = [
-      ...this.breadcrumbs,
-      {
-        label: event.detail.label,
-        bid: event.detail.bid,
-        url: event.detail.url,
-      },
-    ];
+    clearTimeout(addbreadTimeout);
+    addbreadTimeout = setTimeout(() => {
+      this.breadcrumbs = [
+        ...this.breadcrumbs,
+        {
+          label: event.detail.label,
+          bid: event.detail.bid,
+          url: event.detail.url,
+        },
+      ];
+    }, 100);
   }
   async componentWillLoad() {
     this.breadcrumbs = [];
   }
+  disconnectedCallback() {
+    clearTimeout(breadcrumbTimeout);
+    clearTimeout(addbreadTimeout);
+  }
   componentWillUpdate() {
     // Pass the menu type and menu-button-submenu-expand attributes to
     // the child menu-level-container component.

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

@@ -1,6 +1,8 @@
 import { Component, Element, h, State, Listen, Prop } from '@stencil/core';
 import { MenuType, SiteLogoSize, ColorVariant } from '../../../utils/utils';
 import ResizeObserver from 'resize-observer-polyfill';
+let sidebarClickTimeout = null;
+let sidepanelClickTimeout = null;
 export class MenuSidebar {
   constructor() {
     /**
@@ -241,17 +243,23 @@ export class MenuSidebar {
     const sidebarContainer = document.querySelector('.hy-menu-sidebar--container');
     if (sidebarContainer) {
       sidebarContainer.addEventListener('click', (e) => {
-        if (e.target.classList.contains('sidebar-open')) {
-          this.closeWholeTree();
-        }
+        clearTimeout(sidebarClickTimeout);
+        sidebarClickTimeout = setTimeout(() => {
+          if (e.target.classList.contains('sidebar-open')) {
+            this.closeWholeTree();
+          }
+        }, 250);
       });
     }
     const sidepanelContainer = document.querySelector('.hy-menu-sidepanel--container');
     if (sidepanelContainer) {
       sidepanelContainer.addEventListener('click', (e) => {
-        if (e.target.classList.contains('sidepanel-open')) {
-          this.panelToggle(e);
-        }
+        clearTimeout(sidepanelClickTimeout);
+        sidepanelClickTimeout = setTimeout(() => {
+          if (e.target.classList.contains('sidepanel-open')) {
+            this.panelToggle(e);
+          }
+        }, 250);
       });
     }
     const logoColor = ColorVariant.black;

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

@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop, State, Fragment } from '@stencil/core';
+let resizeTimeout = null;
 export class PersonProfile {
   constructor() {
     this.isFullAboutTextHidden = false;
@@ -6,6 +7,9 @@ export class PersonProfile {
   componentWillLoad() {
     this.viewportSize = window.innerWidth;
   }
+  disconnectedCallback() {
+    clearTimeout(resizeTimeout);
+  }
   toggleShowFullAboutText() {
     this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
   }
@@ -37,7 +41,10 @@ export class PersonProfile {
       }
     }
     window.addEventListener('resize', () => {
-      this.viewportSize = window.innerWidth;
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        this.viewportSize = window.innerWidth;
+      }, 250);
     });
     return (h(Host, null,
       h("section", { class: "hy-profile-page" },

package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.js

@@ -6,6 +6,8 @@ let keys = {
   tab: 'Tab',
   space: 'Space',
 };
+let scrollTimeout = null;
+let resizeTimeout = null;
 export class HyDesktopMenuLinks {
   constructor() {
     /*
@@ -95,18 +97,21 @@ export class HyDesktopMenuLinks {
     let backdropToolbarOffset = backdropOffset - 79;
     if (!this.isDropdown) {
       window.addEventListener('scroll', () => {
-        topOffset = window.pageYOffset;
-        if (topOffset === 0) {
-          activeMenuItemSibling.style.top = `${panelElementOffset}px`;
-        }
-        if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
-          if (bodyElementClasses.contains('toolbar-horizontal')) {
-            activeMenuItemSibling.style.top = `${headerElementHeight}px`;
-            if (this.isDesktopMenuOpen) {
-              this.showBackdropShadow('open', backdropToolbarOffset);
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          topOffset = window.pageYOffset;
+          if (topOffset === 0) {
+            activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+          }
+          if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
+            if (bodyElementClasses.contains('toolbar-horizontal')) {
+              activeMenuItemSibling.style.top = `${headerElementHeight}px`;
+              if (this.isDesktopMenuOpen) {
+                this.showBackdropShadow('open', backdropToolbarOffset);
+              }
             }
           }
-        }
+        }, 250);
       });
     }
     if (!this.isDropdown) {
@@ -135,15 +140,18 @@ export class HyDesktopMenuLinks {
         activeMenuItemSibling.style.right = `-17px`;
       }
       window.addEventListener('resize', () => {
-        windowWidth = window.outerWidth;
-        if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
-          activeMenuItemSibling.style.left = `auto`;
-          activeMenuItemSibling.style.right = `-17px`;
-        }
-        else {
-          activeMenuItemSibling.style.left = `-17px`;
-          activeMenuItemSibling.style.right = `auto`;
-        }
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          windowWidth = window.outerWidth;
+          if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
+            activeMenuItemSibling.style.left = `auto`;
+            activeMenuItemSibling.style.right = `-17px`;
+          }
+          else {
+            activeMenuItemSibling.style.left = `-17px`;
+            activeMenuItemSibling.style.right = `auto`;
+          }
+        }, 250);
       });
     }
   }

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

@@ -2,6 +2,8 @@ import { Component, Element, Event, Fragment, h, Listen, Prop, State } from '@st
 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;
@@ -43,7 +45,10 @@ export class SiteHeader {
     this.menuMobileTopToggled.emit();
   }
   handleScroll() {
-    this.check();
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
+      this.check();
+    }, 250);
   }
   componentDidLoad() {
     // Set the browser resize observer to gather information about browser width.
@@ -142,6 +147,8 @@ export class SiteHeader {
   }
   disconnectedCallback() {
     this.ro.disconnect();
+    clearTimeout(scrollTimeout);
+    clearTimeout(clickTimeout);
   }
   applySizeClasses(size) {
     // Set the menu-type based on the width of the browser.
@@ -176,7 +183,12 @@ export class SiteHeader {
       }
     };
     if (this.isMenuOpen) {
-      window.addEventListener('click', handleClickOutside);
+      window.addEventListener('click', () => {
+        clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+          handleClickOutside;
+        }, 250);
+      });
     }
     let activeLang = 'en';
     let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);

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

@@ -0,0 +1,199 @@
+import { r as registerInstance, h, H as Host } from './index-daaf0985.js';
+import { G as GridColumns, a as GridColumnsSm, b as GridColumnsLg, c as GridAlignVariants } from './utils-966ffdb5.js';
+
+const colorBoxCss = ":host{display:block}";
+
+let ColorBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+ColorBox.style = colorBoxCss;
+
+const colors = {
+  brandMain: '#0e688b',
+  brandMainLight: '#107eab',
+  brandMainActive: '#005379',
+  brandMainDark: '#003146',
+  brandMainNearlyBlack: '#000222',
+  grayscaleWhite: '#fff',
+  grayscaleLight: '#f8f8f8',
+  grayscaleMedium: '#d2d2d2',
+  grayscaleBackgroundBox: '#f5f5f5',
+  grayscaleBackgroundArrow: '#dfdfdf',
+  grayscaleMediumDark: '#979797',
+  grayscaleDark: '#555555',
+  grayscaleBlack: '#000000',
+  additionalRedLight: '#E5053A',
+  additionalRedDark: '#A31621',
+  additionalPurpleLight: '#420039',
+  additionalYellow: '#F9A21A',
+  additionalSkyblue: '#48C5F8',
+  additionalOrange: '#D14600',
+  additionalGreenLight: '#96BA3C',
+  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 fillcolors = {
+  primary: colors.brandMain,
+  secondary: 'white',
+};
+let Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Button type. Defaults to submit.
+     */
+    this.buttonType = 'submit';
+    /**
+     * Custom classes added to button element.
+     */
+    this.buttonClasses = '';
+    /**
+     * The element variant. Defaults to primary
+     */
+    this.variant = 'primary';
+    /**
+     *  deprecated, use disabled boolean value
+     *  */
+    this.state = 'enabled';
+    /**
+     * Size (height) of the button. Normal: 44px, large: 48px
+     */
+    this.size = 'normal';
+    /**
+     * Use this to programmatically disable the button, matches the native button functionality
+     */
+    this.disabled = false;
+    /**
+     *  Set this on if an anchor tag is required instead of a button.
+     */
+    this.url = '';
+    /**
+     * Aria label for the element
+     */
+    this.ariaLabel = '';
+    /**
+     * Use only with url property. Sets the
+     */
+    this.isExternal = false;
+    this.attrs = '';
+  }
+  render() {
+    const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size, this.buttonClasses];
+    const iconFillColor = fillcolors[this.variant];
+    const target = this.isExternal ? '_blank' : '_self';
+    let props = {};
+    if (this.attrs && this.attrs.length > 2) {
+      let attrString = JSON.parse(this.attrs);
+      let attrArray = attrString.split('" ');
+      attrArray.map((item) => {
+        let parts = item.split('=');
+        let key = parts[0];
+        let value = parts[1];
+        key = key.replaceAll('"', ' ');
+        key = key.trim();
+        if (key !== 'class') {
+          value = value.replaceAll('"', ' ');
+          value = value.trim();
+          props[key] = value;
+        }
+      });
+    }
+    return this.url ? (h(Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel }, h("div", { style: { display: 'flex' } }, h("a", { class: classAttributes.join(' '), href: this.url, target: target }, h("span", { class: "hy-button__text" }, h("slot", null)), h("span", { class: "hy-button__icon" }, h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (h(Host, { "aria-label": this.ariaLabel }, h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(' '), disabled: this.disabled }, props), !!this.icon && (h("span", { class: "hy-button__icon hy-button__icon--left" }, h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))), h("span", { class: "hy-button__text" }, h("slot", null)), !!this.iconRight && (h("span", { class: "hy-button__icon hy-button__icon--right" }, h("hy-icon", { icon: this.iconRight, fill: iconFillColor, size: 13 }))))));
+  }
+};
+Button.style = buttonCss;
+
+const docsContainerCss = "div.hy-docs-container{display:block;margin:2rem 0}";
+
+let DocsContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "hy-docs-container" }, h("slot", null)));
+  }
+};
+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}}";
+
+let GridContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-grid--container"];
+    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+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%}}";
+
+let GridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.columns = GridColumns.default;
+    this.columnssm = GridColumnsSm.default;
+    this.columnslg = GridColumnsLg.default;
+    this.contentalign = GridAlignVariants.default;
+  }
+  render() {
+    const classAttributes = [
+      'hy-grid-item',
+      `hy-grid__col-${this.columnssm}-sm`,
+      `hy-grid__col-${this.columns}`,
+      `hy-grid__col-${this.columnslg}-lg`,
+      `hy-grid-align__${this.contentalign}`
+    ];
+    return (h(Host, { class: classAttributes.join(' ') }, h("slot", null)));
+  }
+};
+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}";
+
+let GridRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ['hy-grid__row'];
+    return (h(Host, { class: classAttributes.join(' ') }, h("slot", null)));
+  }
+};
+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}}";
+
+let SectionContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: "hy-section--container" }, h("slot", null)));
+  }
+};
+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}";
+
+let TinyText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const classAttributes = ["hy-tiny-text"];
+    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+};
+TinyText.style = tinyTextCss;
+
+export { ColorBox as color_box, Button as hy_button, DocsContainer as hy_docs_container, GridContainer as hy_grid_container, GridItem as hy_grid_item, GridRow as hy_grid_row, SectionContainer as hy_section_container, TinyText as hy_tiny_text };

package/dist/esm/{globalScript-92c6b812.js → globalScript-9d045b36.js}

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