@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/components/hy-introduction.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './index3.js';
 import { H as HeadingVarians, h as HeadingSectionVariants } from './utils.js';
 import { d as defineCustomElement$6 } from './hy-box2.js';
 import { d as defineCustomElement$5 } from './heading.js';
@@ -7,114 +7,113 @@ import { d as defineCustomElement$3 } from './image.js';
 import { d as defineCustomElement$2 } from './hy-main-content-wrapper2.js';
 
 const hyIntroductionCss = ":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-introduction__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (min-width: 60rem){.hy-introduction__content.hy-introduction__content--without-image.hy-introduction__content--limit-width{width:calc(50% - 16px)}}.hy-introduction--reversed .hy-introduction__outer-content{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@media (min-width: 60rem){.hy-introduction--reversed .hy-introduction__outer-content{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.hy-introduction--with-bg{width:auto}@media (min-width: 60rem){.hy-introduction--with-bg{padding:0}}.hy-introduction--with-bg__white{background:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__content--with-image{background:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__title h2,.hy-introduction--with-bg__white .hy-introduction__description{color:var(--grayscale-black)}.hy-introduction--with-bg__white .hy-introduction__link{background:var(--brand-main-light);color:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__link__icon svg{fill:var(--grayscale-white)}.hy-introduction--with-bg__white .hy-introduction__link:hover{background:var(--brand-main-active)}.hy-introduction__outer-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media (min-width: 60rem){.hy-introduction__outer-content{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:0}@supports (gap: 32px){.hy-introduction__outer-content{gap:32px}}}@media (min-width: 1601px){@supports (gap: 48px){.hy-introduction__outer-content{gap:48px}}}.hy-introduction__content--without-image{width:100%}@media (min-width: 60rem){.hy-introduction__content--without-image{width:91.46%}}@media (min-width: 75.0625rem){.hy-introduction__content--without-image{width:82.89%}}@media (min-width: 1601px){.hy-introduction__content--without-image{width:74.2%}}@media (min-width: 60rem){.hy-introduction__content--with-image{margin:0;padding:0;width:50%}}@media (min-width: 60rem){.hy-introduction__title .hy-heading__container{padding-top:0}}.hy-introduction__image{width:100%}@media (min-width: 60rem){.hy-introduction__image{width:50%}@supports not (gap: 32px){.hy-introduction__image{width:calc(50% - 32px)}}}.hy-introduction__image img,.hy-introduction__image .hy-image,.hy-introduction__image .hy-image .hy-image__image-container{height:100% !important}.hy-introduction__description{font-size:0.9375rem;line-height:22px;font-weight:400;color:var(--grayscale-black);font-family:var(--main-font-family);margin-bottom:24px;margin-top:0}@media (min-width: 30rem){.hy-introduction__description{font-size:1rem;line-height:24px}}@media (min-width: 60rem){.hy-introduction__description{margin-bottom:28px}}@media (min-width: 1601px){.hy-introduction__description{font-size:1.0625rem;line-height:26px}}@media (min-width: 75.0625rem){.hy-introduction__description__large{font-size:1.0625rem;line-height:26px;margin-bottom:28px}}.hy-introduction__link{font-size:1rem;line-height:20px;letter-spacing:-0.5px;background-color:var(--brand-main-light);-webkit-box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.1);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--grayscale-white);cursor:pointer;display:inline-block;font-family:var(--main-font-family);font-weight:700;height:100%;padding:12px 60px 12px 12px;position:relative;text-decoration:none}@media (min-width: 30rem){.hy-introduction__link{font-size:1rem;line-height:20px;letter-spacing:-0.6px;padding:15px 62px 15px 16px}}@media (min-width: 60rem){.hy-introduction__link{font-size:1.125rem;line-height:20px}}@media (min-width: 75.0625rem){.hy-introduction__link{font-size:1.25rem;line-height:20px;letter-spacing:-0.7px;padding:16px 70px 16px 18px}}.hy-introduction__link__icon{position:absolute;right:16px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hy-introduction__link__icon svg{fill:var(--grayscale-white)}";
+const HyIntroductionStyle0 = hyIntroductionCss;
 
-const HyIntroduction$1 = /*@__PURE__*/ proxyCustomElement(class HyIntroduction extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.variant = null;
-    this.reversed = false;
-    this.limitContentWidth = false;
-    this.textTitle = undefined;
-    this.textDescription = null;
-    this.url = undefined;
-    this.scLabel = undefined;
-    this.urlTitle = undefined;
-    this.imageUrl = undefined;
-    this.imageAlt = "";
-    this.isExternal = false;
-    this.headerstyle = "common";
-    this.sourceSet = undefined;
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+const HyIntroduction$1 = /*@__PURE__*/ proxyCustomElement(class HyIntroduction extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.variant = null;
+        this.reversed = false;
+        this.limitContentWidth = false;
+        this.textTitle = undefined;
+        this.textDescription = null;
+        this.url = undefined;
+        this.scLabel = undefined;
+        this.urlTitle = undefined;
+        this.imageUrl = undefined;
+        this.imageAlt = "";
+        this.isExternal = false;
+        this.headerstyle = "common";
+        this.sourceSet = undefined;
     }
-  }
-  render() {
-    const classAttributes = [
-      "hy-introduction",
-      `hy-introduction__${this.headerstyle}`,
-      this.headerstyle,
-      this.reversed ? "hy-introduction--reversed" : "",
-      this.variant
-        ? `hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`
-        : "hy-introduction--without-bg",
-    ].join(" ");
-    const classTitle = ["hy-introduction__title", `hy-introduction__title__${this.headerstyle}`].join(" ");
-    const classDescription = ["hy-introduction__description", `hy-introduction__description__${this.headerstyle}`].join(" ");
-    const contentWrapperClasses = [
-      "hy-introduction__content",
-      this.reversed ? "hy-introduction__content--reversed" : "",
-      this.imageUrl ? "hy-introduction__content--with-image" : "hy-introduction__content--without-image",
-      this.limitContentWidth ? "hy-introduction__content--limit-width" : "",
-    ].join(" ");
-    const target = this.isExternal ? "_blank" : "_self";
-    return (h(Host, null, h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { class: classAttributes }, h("hy-main-content-wrapper", null, h("div", { class: "hy-introduction__outer-content" }, h("div", { class: contentWrapperClasses }, h("hy-heading", { class: classTitle, heading: HeadingVarians.h2, section: HeadingSectionVariants.introduction }, this.textTitle), h("p", { class: classDescription }, this.textDescription), this.url && (h("div", { class: "hy-introduction__link__container" }, h("a", { class: "hy-introduction__link", href: this.url, "aria-label": this.scLabel, target: target }, this.urlTitle, h("span", { class: "hy-introduction__link__icon" }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 24 })))))), this.imageUrl &&
-      (this.sourceSet ? (h("div", { class: "hy-introduction__image" }, h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))) : (h("div", { class: "hy-introduction__image" }, h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
-  }
-  get el() { return this; }
-  static get style() { return hyIntroductionCss; }
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+    }
+    render() {
+        const classAttributes = [
+            "hy-introduction",
+            `hy-introduction__${this.headerstyle}`,
+            this.headerstyle,
+            this.reversed ? "hy-introduction--reversed" : "",
+            this.variant
+                ? `hy-introduction--with-bg hy-introduction--with-bg__${this.variant}`
+                : "hy-introduction--without-bg",
+        ].join(" ");
+        const classTitle = ["hy-introduction__title", `hy-introduction__title__${this.headerstyle}`].join(" ");
+        const classDescription = ["hy-introduction__description", `hy-introduction__description__${this.headerstyle}`].join(" ");
+        const contentWrapperClasses = [
+            "hy-introduction__content",
+            this.reversed ? "hy-introduction__content--reversed" : "",
+            this.imageUrl ? "hy-introduction__content--with-image" : "hy-introduction__content--without-image",
+            this.limitContentWidth ? "hy-introduction__content--limit-width" : "",
+        ].join(" ");
+        const target = this.isExternal ? "_blank" : "_self";
+        return (h(Host, { key: 'a59a39959bbefc93e076965bb49c5dd7c4e70e45' }, h("hy-box", { key: 'ae66a294073037ab68e584e51f9b989d7dd9706c', pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { key: '762fdad7a6b399f452dacff5422708b7a3788f8a', class: classAttributes }, h("hy-main-content-wrapper", { key: 'e25a52dc10c6ee11864ec24cab59ba133b6e202f' }, h("div", { key: '34cfe9931c959f363f2bb96c2877ac6bcf661ec6', class: "hy-introduction__outer-content" }, h("div", { key: '48499a299b2c0b753cb40280d59ac1ec524620eb', class: contentWrapperClasses }, h("hy-heading", { key: '1759728a5478cd15651c98f6fbc55ec19a525322', class: classTitle, heading: HeadingVarians.h2, section: HeadingSectionVariants.introduction }, this.textTitle), h("p", { key: '3fa08a9b8ff40a12001172eb25ecc5986ff185a4', class: classDescription }, this.textDescription), this.url && (h("div", { key: '2b7ba63ba165e734966b826e537f4a4ddfc052b3', class: "hy-introduction__link__container" }, h("a", { key: '8a0d6d44ea1c92056db4d9912e509d309da734a0', class: "hy-introduction__link", href: this.url, "aria-label": this.scLabel, target: target }, this.urlTitle, h("span", { key: 'ac0a4b11b2250dfa0b282de9bc39c0a20666618b', class: "hy-introduction__link__icon" }, h("hy-icon", { key: '9dbcd86836c3c24d3688f0481887d2fc30554a78', icon: "hy-icon-arrow-right", size: 24 })))))), this.imageUrl &&
+            (this.sourceSet ? (h("div", { class: "hy-introduction__image" }, h("hy-image", { "source-set": this.sourceSet, "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))) : (h("div", { class: "hy-introduction__image" }, h("hy-image", { "image-url": this.imageUrl, aspectRatioWidth: 16, aspectRatioHeight: 10, "image-alt": this.imageAlt }))))))), h("hy-box", { key: '8a2d1dd9323fd62beabf2ff7853cf466aa567b2b', mb: "1.75, 1.75, 2, 2.5" })));
+    }
+    get el() { return this; }
+    static get style() { return HyIntroductionStyle0; }
 }, [0, "hy-introduction", {
-    "variant": [1],
-    "reversed": [4],
-    "limitContentWidth": [4, "limit-content-width"],
-    "textTitle": [1, "text-title"],
-    "textDescription": [1, "text-description"],
-    "url": [1],
-    "scLabel": [1, "sc-label"],
-    "urlTitle": [1, "url-title"],
-    "imageUrl": [1, "image-url"],
-    "imageAlt": [1, "image-alt"],
-    "isExternal": [4, "is-external"],
-    "headerstyle": [1],
-    "sourceSet": [1, "source-set"]
-  }]);
+        "variant": [1],
+        "reversed": [4],
+        "limitContentWidth": [4, "limit-content-width"],
+        "textTitle": [1, "text-title"],
+        "textDescription": [1, "text-description"],
+        "url": [1],
+        "scLabel": [1, "sc-label"],
+        "urlTitle": [1, "url-title"],
+        "imageUrl": [1, "image-url"],
+        "imageAlt": [1, "image-alt"],
+        "isExternal": [4, "is-external"],
+        "headerstyle": [1],
+        "sourceSet": [1, "source-set"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-introduction", "hy-box", "hy-heading", "hy-icon", "hy-image", "hy-main-content-wrapper"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-introduction":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyIntroduction$1);
-      }
-      break;
-    case "hy-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "hy-heading":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "hy-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "hy-main-content-wrapper":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-introduction", "hy-box", "hy-heading", "hy-icon", "hy-image", "hy-main-content-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-introduction":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyIntroduction$1);
+            }
+            break;
+        case "hy-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "hy-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "hy-image":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "hy-main-content-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyIntroduction = HyIntroduction$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyIntroduction, defineCustomElement };
-
-//# sourceMappingURL=hy-introduction.js.map

package/components/hy-key-figure-group.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyKeyFigureGroup extends Components.HyKeyFigureGroup, HTMLElement {}
 export const HyKeyFigureGroup: {
-  prototype: HyKeyFigureGroup;
-  new (): HyKeyFigureGroup;
+    prototype: HyKeyFigureGroup;
+    new (): HyKeyFigureGroup;
 };
 /**
  * Used to define this component and all nested components recursively.

package/components/hy-key-figure-group.js

@@ -1,108 +1,107 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, c as Host } from './index3.js';
 import { K as KeyHighlightVariants } from './utils.js';
 import { j as jsonParserWorker } from './globalScript.js';
 import { d as defineCustomElement$3 } from './hy-box2.js';
 import { d as defineCustomElement$2 } from './hy-key-figure2.js';
 
 const hyKeyFigureGroupCss = ":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-key-figure-group-container{margin:20px 0 28px 0}@media (min-width: 60rem){.hy-key-figure-group-container{margin:24px 0 32px 0}}@media (min-width: 1601px){.hy-key-figure-group-container{margin:40px 0}}@media (min-width: 75.0625rem){.hy-key-figure-group-container__large{margin:40px 0}}.hy-key-figure-group{display:block;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;max-width:30rem;margin-right:auto;margin-left:auto;width:100%}@media (min-width: 30rem){.hy-key-figure-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}}@media (min-width: 60rem){.hy-key-figure-group{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left}}@media (min-width: 60rem){.hy-key-figure-group.hy-key-figure-group-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media (min-width: 30rem){.hy-key-figure-group .box-2,.hy-key-figure-group .box-3{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:33%;width:33%}}@media (min-width: 30rem){.hy-key-figure-group .box-4{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:49%;width:49%}}@media (min-width: 60rem){.hy-key-figure-group .box-4{max-width:25%;width:25%}}";
+const HyKeyFigureGroupStyle0 = hyKeyFigureGroupCss;
 
-const HyKeyFigureGroup$1 = /*@__PURE__*/ proxyCustomElement(class HyKeyFigureGroup extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.dataItems = undefined;
-    this.headerstyle = "common";
-  }
-  async componentWillLoad() {
-    this._dataItems = await jsonParserWorker(this.dataItems);
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+const HyKeyFigureGroup$1 = /*@__PURE__*/ proxyCustomElement(class HyKeyFigureGroup extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.dataItems = undefined;
+        this.headerstyle = "common";
     }
-  }
-  getBoxClassName(count) {
-    let className = "box";
-    if (count % 3 == 0) {
-      className = "box-3";
+    async componentWillLoad() {
+        this._dataItems = await jsonParserWorker(this.dataItems);
     }
-    else if (count % 4 == 0) {
-      className = "box-4";
-    }
-    else if (count % 5 == 0) {
-      className = "box-5";
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
     }
-    return className;
-  }
-  render() {
-    /*
-    - Logic:
-    - 3 items: big
-    - 4 items: small
-    - 5 items: big
-    - 6 items: big
-    * */
-    const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;
-    const classAttributes = [
-      keyFiguresVariant,
-      "hy-key-figure-group-container",
-      `hy-key-figure-group-container__${this.headerstyle}`,
-    ].join(" ");
-    const classRowAttributes = ["hy-key-figure-group"].join(" ");
-    const classRowCenteredAttributes = ["hy-key-figure-group", "hy-key-figure-group-centered"].join(" ");
-    if (this._dataItems.length % 5 == 0) {
-      return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x, index) => {
-        if (index < 3) {
-          return (h("hy-key-figure", { class: "box-3", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+    getBoxClassName(count) {
+        let className = "box";
+        if (count % 3 == 0) {
+            className = "box-3";
         }
-      })), h("div", { class: classRowCenteredAttributes }, this._dataItems.map((x, index) => {
-        if (index >= 3) {
-          return (h("hy-key-figure", { class: "box-2", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+        else if (count % 4 == 0) {
+            className = "box-4";
         }
-      }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+        else if (count % 5 == 0) {
+            className = "box-5";
+        }
+        return className;
     }
-    else {
-      return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x) => {
-        return (h("hy-key-figure", { class: this.getBoxClassName(this._dataItems.length), variant: keyFiguresVariant, heading: x.heading, description: x.description }));
-      }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+    render() {
+        /*
+        - Logic:
+        - 3 items: big
+        - 4 items: small
+        - 5 items: big
+        - 6 items: big
+        * */
+        const keyFiguresVariant = this._dataItems.length == 4 ? KeyHighlightVariants.small : KeyHighlightVariants.default;
+        const classAttributes = [
+            keyFiguresVariant,
+            "hy-key-figure-group-container",
+            `hy-key-figure-group-container__${this.headerstyle}`,
+        ].join(" ");
+        const classRowAttributes = ["hy-key-figure-group"].join(" ");
+        const classRowCenteredAttributes = ["hy-key-figure-group", "hy-key-figure-group-centered"].join(" ");
+        if (this._dataItems.length % 5 == 0) {
+            return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x, index) => {
+                if (index < 3) {
+                    return (h("hy-key-figure", { class: "box-3", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+                }
+            })), h("div", { class: classRowCenteredAttributes }, this._dataItems.map((x, index) => {
+                if (index >= 3) {
+                    return (h("hy-key-figure", { class: "box-2", variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+                }
+            }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+        }
+        else {
+            return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: classRowAttributes }, this._dataItems.map((x) => {
+                return (h("hy-key-figure", { class: this.getBoxClassName(this._dataItems.length), variant: keyFiguresVariant, heading: x.heading, description: x.description }));
+            }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+        }
     }
-  }
-  get el() { return this; }
-  static get style() { return hyKeyFigureGroupCss; }
+    get el() { return this; }
+    static get style() { return HyKeyFigureGroupStyle0; }
 }, [0, "hy-key-figure-group", {
-    "dataItems": [1, "data-items"],
-    "headerstyle": [1]
-  }]);
+        "dataItems": [1, "data-items"],
+        "headerstyle": [1]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-key-figure-group", "hy-box", "hy-key-figure"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-key-figure-group":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyKeyFigureGroup$1);
-      }
-      break;
-    case "hy-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "hy-key-figure":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-key-figure-group", "hy-box", "hy-key-figure"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-key-figure-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyKeyFigureGroup$1);
+            }
+            break;
+        case "hy-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "hy-key-figure":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const HyKeyFigureGroup = HyKeyFigureGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyKeyFigureGroup, defineCustomElement };
-
-//# sourceMappingURL=hy-key-figure-group.js.map

package/components/hy-key-figure.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyKeyFigure extends Components.HyKeyFigure, HTMLElement {}
 export const HyKeyFigure: {
-  prototype: HyKeyFigure;
-  new (): HyKeyFigure;
+    prototype: HyKeyFigure;
+    new (): HyKeyFigure;
 };
 /**
  * Used to define this component and all nested components recursively.

package/components/hy-key-figure.js

@@ -4,5 +4,3 @@ const HyKeyFigure = HyKeyFigure$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { HyKeyFigure, defineCustomElement };
-
-//# sourceMappingURL=hy-key-figure.js.map

package/components/hy-key-figure2.js

@@ -1,41 +1,40 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { K as KeyHighlightVariants } from './utils.js';
 
 const hyKeyFigureCss = ":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-key-figure{display:block;margin-bottom:32px;text-align:center;width:100%}@media (min-width: 30rem){.hy-key-figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}}@media (min-width: 60rem){.hy-key-figure{text-align:left}}.hy-key-figure__title{font-size:2.5rem;line-height:60px;font-weight:700;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--brand-main-light);display:inline;font-family:var(--main-font-family);letter-spacing:-2px;position:relative;z-index:1}@media (min-width: 30rem){.hy-key-figure__title{font-size:2.5rem;line-height:30px}}@media (min-width: 75.0625rem){.hy-key-figure__title{font-size:5rem;line-height:70px}}.hy-key-figure__description{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:0.875rem;line-height:20px;letter-spacing:0;line-height:20px;margin-top:8px}@media (min-width: 75.0625rem){.hy-key-figure__description{font-size:1.25rem;line-height:20px}}";
+const HyKeyFigureStyle0 = hyKeyFigureCss;
 
-const HyKeyFigure = /*@__PURE__*/ proxyCustomElement(class HyKeyFigure extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.variant = KeyHighlightVariants.default;
-    this.heading = undefined;
-    this.description = undefined;
-  }
-  render() {
-    const classVariant = [this.variant, "hy-key-figure"].join(" ");
-    return (h("div", { class: classVariant }, h("div", { class: "hy-key-figure__title" }, this.heading), h("div", { class: "hy-key-figure__description" }, this.description)));
-  }
-  static get style() { return hyKeyFigureCss; }
+const HyKeyFigure = /*@__PURE__*/ proxyCustomElement(class HyKeyFigure extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.variant = KeyHighlightVariants.default;
+        this.heading = undefined;
+        this.description = undefined;
+    }
+    render() {
+        const classVariant = [this.variant, "hy-key-figure"].join(" ");
+        return (h("div", { key: '306e7df548bbd690897035c74c5808941035a22c', class: classVariant }, h("div", { key: '4c61143337f76c84c909eeaf2efe12fdedd6abf8', class: "hy-key-figure__title" }, this.heading), h("div", { key: '8ddd774cc03543090000d361b4d11a77996427a9', class: "hy-key-figure__description" }, this.description)));
+    }
+    static get style() { return HyKeyFigureStyle0; }
 }, [1, "hy-key-figure", {
-    "variant": [1],
-    "heading": [1],
-    "description": [1]
-  }]);
+        "variant": [1],
+        "heading": [1],
+        "description": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-key-figure"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-key-figure":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyKeyFigure);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-key-figure"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-key-figure":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyKeyFigure);
+            }
+            break;
+    } });
 }
 
 export { HyKeyFigure as H, defineCustomElement as d };
-
-//# sourceMappingURL=hy-key-figure2.js.map

package/components/hy-key-highlight-group.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../dist/types/components";
 
 interface HyKeyHighlightGroup extends Components.HyKeyHighlightGroup, HTMLElement {}
 export const HyKeyHighlightGroup: {
-  prototype: HyKeyHighlightGroup;
-  new (): HyKeyHighlightGroup;
+    prototype: HyKeyHighlightGroup;
+    new (): HyKeyHighlightGroup;
 };
 /**
  * Used to define this component and all nested components recursively.