@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/components/hy-hero.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyHero extends Components.HyHero, HTMLElement {}
+export const HyHero: {
+  prototype: HyHero;
+  new (): HyHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-hero.js

@@ -0,0 +1,155 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { j as jsonParserWorker } from './globalScript.js';
+import { m as HeroTypeVariant, n as HeroGroupTypeVariant, o as HeroColorVariant, p as HeroSizeVariant, a as CtaLinkButtonVariants } from './utils.js';
+import { d as defineCustomElement$4 } from './hy-box2.js';
+import { d as defineCustomElement$3 } from './cta-button.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyHeroCss = ":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-hero{position:relative;padding-bottom:0}@media (min-width: 60rem){.hy-hero{margin-top:32px}}@media (min-width: 60rem){.hy-hero:not(.has-shortcuts){margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-hero{max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 75.0625rem){.with-sidebar .hy-hero{padding-left:32px;padding-right:32px}}@media (min-width: 1601px){.with-sidebar .hy-hero{padding-right:0;padding-left:0;max-width:1216px;margin-right:auto;margin-left:auto}}@media (min-width: 60rem){.hy-hero--white{margin-top:0}}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts){padding-bottom:48px}}.hy-hero--white:not(.has-shortcuts):after{width:100%;background-color:var(--grayscale-medium-dark);height:1px;content:\"\";margin:0 auto;display:block}@media (min-width: 60rem){.hy-hero--white:not(.has-shortcuts):after{position:absolute;left:0;right:0;bottom:0}}.hy-hero--white:not(.hy-hero--front_page):after{max-width:1216px}.hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero__container{display:grid;position:relative}}@media (min-width: 60rem){.hy-hero--small .hy-hero__container{grid-template-columns:60% 1fr}}@media (min-width: 60rem){.hy-hero--large .hy-hero__container{grid-template-columns:repeat(2, 1fr)}}.hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}@media (min-width: 30rem){.hy-hero__content-container{padding:40px 2rem}}@media (min-width: 75.0625rem){.hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:40px 24px}}@media (min-width: 1601px){.hy-hero__content-container{max-width:1216px}}.hy-hero--black .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 75.0625rem){.hy-hero--white .hy-hero__content-container{padding:40px 24px 40px 0}}.hy-hero__content{position:relative}h2.hy-hero__title{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;max-width:100%;width:auto}.hy-hero--blue h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--black h2.hy-hero__title{color:var(--grayscale-white) !important}.hy-hero--white h2.hy-hero__title{color:var(--grayscale-black) !important}h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:33px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:none}@media (min-width: 1024px){h2.hy-hero__title.hy-heading__hero{font-size:2.25rem;line-height:40px;letter-spacing:-1.15px}}@media (min-width: 1601px){h2.hy-hero__title.hy-heading__hero{font-size:2.375rem;line-height:48px;letter-spacing:-1.3px}}.hy-hero__description{font-size:1rem;line-height:24px;font-family:var(--main-font-family);margin:16px 0 0 0;padding:0;position:relative}@media (min-width: 1601px){.hy-hero__description{font-size:1.0625rem;line-height:26px}}.hy-hero--black .hy-hero__description{color:var(--grayscale-white)}.hy-hero--blue .hy-hero__description{color:var(--grayscale-white)}.hy-hero--white .hy-hero__description{color:var(--grayscale-black)}.hy-hero__actions{margin-top:24px}.hy-hero__image-container{margin:0;padding:0;position:relative}.hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero__image-container{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0}}@media (min-width: 60rem){.hy-hero--front_page .hy-hero__image-container{padding:0}}.hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:contain;object-fit:contain;width:100%}.has-cover .hy-image__image{-o-object-fit:cover;object-fit:cover}.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--group_landing.hy-hero--generic_site_group h2.hy-hero__title.hy-heading__hero,.hy-hero.hy-hero--research_group h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--white{padding-top:40px;margin-top:0}}.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2rem;line-height:38px;font-weight:700;color:var(--grayscale-black);font-family:var(--main-font-family);letter-spacing:-0.8px;margin-bottom:0;text-transform:uppercase}@media (min-width: 1024px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:2.875rem;line-height:54px;letter-spacing:-1.15px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page h2.hy-hero__title.hy-heading__hero{font-size:3.25rem;line-height:60px;letter-spacing:-1.3px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page{margin-left:-32px;margin-right:-32px;max-width:none}}.hy-hero.hy-hero--front_page .hy-hero__container{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}}.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 1rem 40px;margin:0 auto;width:100%}.hy-hero--black .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--brand-main)}.hy-hero--white .hy-hero.hy-hero--front_page .hy-hero__content-container{background-color:var(--grayscale-white)}@media (min-width: 30rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding:24px 2rem 40px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:330px;padding:56px 2rem}}@media (min-width: 1060px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:373px}}@media (min-width: 1160px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:480px}}@media (min-width: 75.0625rem){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:32px;padding-right:8px}}@media (min-width: 1260px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:443px}}@media (min-width: 1280px){.hy-hero.hy-hero--front_page .hy-hero__content-container{max-width:1216px;padding-left:0}}@media (min-width: 1360px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:478px}}@media (min-width: 1460px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:513px}}@media (min-width: 1560px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:548px}}@media (min-width: 1601px){.hy-hero.hy-hero--front_page .hy-hero__content-container{padding-left:0}}@media (min-width: 1660px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:583px}}@media (min-width: 1760px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:619px}}@media (min-width: 1860px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:654px}}@media (min-width: 1920px){.hy-hero.hy-hero--front_page .hy-hero__content-container{min-height:675px}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__image-container{width:40%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--small .hy-hero__content{max-width:60%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__image-container{width:50%}}@media (min-width: 60rem){.hy-hero.hy-hero--front_page.hy-hero--large .hy-hero__content{max-width:50%}}.hy-hero.hy-hero--front_page .hy-hero__image-container{background-position:50% 50%;background-size:cover;background:transparent;margin:0;padding:0;position:relative}.hy-hero.hy-hero--front_page .hy-hero__image-container figure{margin:0}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__image-container{background-color:var(--grayscale-white);bottom:0;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:8px 0;position:absolute;right:0;top:0}}.hy-hero.hy-hero--front_page .hy-hero__content{position:relative}@media (min-width: 60rem){.hy-hero.hy-hero--front_page .hy-hero__content{padding-right:24px}}.hy-hero.hy-hero--front_page .hy-image__image{display:block;height:100%;min-height:205px;-o-object-fit:cover;object-fit:cover;width:100%}.hy-hero__spacer-box{display:none}@media (min-width: 60rem){.hy-hero__spacer-box{display:block;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;position:absolute;inset:0}}@media (min-width: 60rem){.hy-hero--small .hy-hero__spacer-box{width:60%}}@media (min-width: 60rem){.hy-hero--large .hy-hero__spacer-box{width:50%}}.hy-hero--black .hy-hero__spacer-box{background-color:var(--grayscale-black)}.hy-hero--blue .hy-hero__spacer-box{background-color:var(--brand-main)}.hy-hero--white .hy-hero__spacer-box{background-color:var(--grayscale-white)}";
+
+let timeout = null;
+let delay = 250;
+const HyHero$1 = /*@__PURE__*/ proxyCustomElement(class HyHero extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heroType = HeroTypeVariant.landing;
+    this.heroGroupType = HeroGroupTypeVariant.default;
+    this.colorVariant = HeroColorVariant.blue;
+    this.sizeVariant = HeroSizeVariant.large;
+    this.image = undefined;
+    this.imageAltText = "";
+    this.disableLazy = false;
+    this.hasShortcuts = false;
+    this.heading = undefined;
+    this.description = undefined;
+    this.url = undefined;
+    this.urlTitle = undefined;
+    this.scLabel = undefined;
+    this.isExternal = false;
+    this.sourceSet = undefined;
+  }
+  async componentWillLoad() {
+    this._sourceSet = await jsonParserWorker(this.sourceSet);
+  }
+  handleHeroImageObjectFitValue(heroSizeVariant, heroElement) {
+    const heroContentContainerElement = heroElement.getElementsByClassName("hy-hero__content-container")[0];
+    if (heroSizeVariant === "small") {
+      if (heroContentContainerElement.offsetHeight >= 300) {
+        heroElement.classList.add("has-cover");
+      }
+      else {
+        heroElement.classList.remove("has-cover");
+      }
+    }
+    if (heroSizeVariant === "large") {
+      if (heroContentContainerElement.offsetHeight >= 344) {
+        heroElement.classList.add("has-cover");
+      }
+      else {
+        heroElement.classList.remove("has-cover");
+      }
+    }
+  }
+  render() {
+    let variant = CtaLinkButtonVariants.heroWhite;
+    let colorVariantValue = this.colorVariant;
+    let heroTypeValue = this.heroType;
+    if (this.heroType === "minor_landing") {
+      colorVariantValue = HeroColorVariant.white;
+      heroTypeValue = HeroTypeVariant.landing;
+    }
+    if (colorVariantValue === HeroColorVariant.blue) {
+      variant = CtaLinkButtonVariants.heroBlue;
+    }
+    if (colorVariantValue === HeroColorVariant.black) {
+      variant = CtaLinkButtonVariants.heroBlack;
+    }
+    if (!colorVariantValue || colorVariantValue === "fp_white") {
+      colorVariantValue = HeroColorVariant.white;
+    }
+    const hyHeroClasses = [
+      "hy-hero",
+      `hy-hero--${heroTypeValue}`,
+      `hy-hero--${this.heroGroupType}`,
+      `hy-hero--${colorVariantValue}`,
+      `hy-hero--${this.sizeVariant}`,
+    ];
+    const heroTitleClasses = ["hy-hero__title", "hy-heading__hero"].join(" ");
+    // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.
+    if (this.hasShortcuts) {
+      hyHeroClasses.push("has-shortcuts");
+    }
+    const aspectRatioWidth = 16;
+    const aspectRatioHeight = 10;
+    const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
+    const aspectRatio = {
+      "--aspectRatio": `${aspect}%`,
+    };
+    window.onload = () => {
+      const heroElement = document.getElementsByClassName("hy-hero")[0];
+      this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
+      window.addEventListener("resize", () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement), delay);
+      });
+    };
+    if (heroTypeValue === "front_page") {
+      return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
+        (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image })))), h("div", { class: `hy-hero__spacer-box` }), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
+    }
+    return (h(Host, null, h("div", { class: hyHeroClasses.join(" ") }, h("div", { class: `hy-hero__container` }, h("div", { class: `hy-hero__image-container`, style: aspectRatio }, this.image &&
+      (this._sourceSet ? (h("picture", null, this._sourceSet.map((item) => (h("source", { srcSet: item.src, media: item.media, type: item.type, sizes: item.sizes ? item.sizes : "" }))), h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAltText, class: `hy-image__image`, src: this.image })))), h("div", { class: `hy-hero__content-container` }, h("div", { class: `hy-hero__content` }, h("div", { class: `hy-hero__title-container` }, h("h2", { innerHTML: this.heading, class: heroTitleClasses })), this.description && h("p", { class: `hy-hero__description` }, this.description), this.url && (h("div", { class: `hy-hero__actions` }, h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant }))))))), h("hy-box", { mb: "2, 2, 1, 1" })));
+  }
+  get el() { return this; }
+  static get style() { return hyHeroCss; }
+}, [0, "hy-hero", {
+    "heroType": [1, "hero-type"],
+    "heroGroupType": [1, "hero-group-type"],
+    "colorVariant": [1, "color-variant"],
+    "sizeVariant": [1, "size-variant"],
+    "image": [1],
+    "imageAltText": [1, "image-alt-text"],
+    "disableLazy": [4, "disable-lazy"],
+    "hasShortcuts": [4, "has-shortcuts"],
+    "heading": [1],
+    "description": [1],
+    "url": [1],
+    "urlTitle": [1, "url-title"],
+    "scLabel": [1, "sc-label"],
+    "isExternal": [4, "is-external"],
+    "sourceSet": [1, "source-set"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-hero", "hy-box", "hy-cta-button", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-hero":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyHero$1);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-cta-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyHero = HyHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyHero, defineCustomElement };

package/components/hy-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyIcon extends Components.HyIcon, HTMLElement {}
+export const HyIcon: {
+  prototype: HyIcon;
+  new (): HyIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-icon.js

@@ -0,0 +1,6 @@
+import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+
+const HyIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyIcon, defineCustomElement };

package/components/hy-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyImage extends Components.HyImage, HTMLElement {}
+export const HyImage: {
+  prototype: HyImage;
+  new (): HyImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-image.js

@@ -0,0 +1,6 @@
+import { I as Image, d as defineCustomElement$1 } from './image.js';
+
+const HyImage = Image;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyImage, defineCustomElement };

package/components/hy-ingress.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyIngress extends Components.HyIngress, HTMLElement {}
+export const HyIngress: {
+  prototype: HyIngress;
+  new (): HyIngress;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-ingress.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const ingressCss = ":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}p.hy-ingress{font-size:1rem;line-height:24px;color:var(--grayscale-black);font-family:var(--main-font-family);margin:0 0 2rem}@media (min-width: 30rem){p.hy-ingress{font-size:1.125rem;line-height:28px}}@media (min-width: 60rem){p.hy-ingress{margin:0 0 2.25rem}}@media (min-width: 1601px){p.hy-ingress{font-size:1.125rem;line-height:32px;margin:0 0 3rem}}@media (min-width: 75.0625rem){p.hy-ingress__large{font-size:1.125rem;line-height:32px;margin:0 0 3rem}}";
+
+const Ingress = /*@__PURE__*/ proxyCustomElement(class Ingress extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headerstyle = "common";
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = ["hy-ingress", `hy-ingress__${this.headerstyle}`].join(" ");
+    return (h(Host, null, h("p", { class: classAttributes }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return ingressCss; }
+}, [4, "hy-ingress", {
+    "headerstyle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-ingress"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-ingress":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Ingress);
+      }
+      break;
+  } });
+}
+
+const HyIngress = Ingress;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyIngress, defineCustomElement };

package/components/hy-introduction.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface HyIntroduction extends Components.HyIntroduction, HTMLElement {}
+export const HyIntroduction: {
+  prototype: HyIntroduction;
+  new (): HyIntroduction;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/hy-introduction.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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';
+import { d as defineCustomElement$4 } from './icon.js';
+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 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";
+      }
+    }
+  }
+  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; }
+}, [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"]
+  }]);
+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;
+  } });
+}
+
+const HyIntroduction = HyIntroduction$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyIntroduction, defineCustomElement };

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

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

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

@@ -0,0 +1,106 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+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 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";
+      }
+    }
+  }
+  getBoxClassName(count) {
+    let className = "box";
+    if (count % 3 == 0) {
+      className = "box-3";
+    }
+    else if (count % 4 == 0) {
+      className = "box-4";
+    }
+    else if (count % 5 == 0) {
+      className = "box-5";
+    }
+    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 }));
+        }
+      })), 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; }
+}, [0, "hy-key-figure-group", {
+    "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;
+  } });
+}
+
+const HyKeyFigureGroup = HyKeyFigureGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyKeyFigureGroup, defineCustomElement };

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

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

package/components/hy-key-figure.js

@@ -0,0 +1,6 @@
+import { H as HyKeyFigure$1, d as defineCustomElement$1 } from './hy-key-figure2.js';
+
+const HyKeyFigure = HyKeyFigure$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyKeyFigure, defineCustomElement };

package/components/hy-key-figure2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+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 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; }
+}, [1, "hy-key-figure", {
+    "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;
+  } });
+}
+
+export { HyKeyFigure as H, defineCustomElement as d };

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

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