@itcenteratunihelsinki/huds-lib 0.5.0 → 0.5.4

package/dist/collection/components/hy-hero/hy-hero.js

@@ -1,179 +1,69 @@
-import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
 import { jsonParserWorker } from '../../global/globalScript';
-import { CtaLinkButtonVariants, HeadingSectionVariants, HeadingVarians, HeroColorVariant, HeroGroupTypeVariant, HeroTypeVariant, } from '../../utils/utils';
+import { CtaLinkButtonVariants, HeadingSectionVariants, HeadingVarians, HeroColorVariant, HeroSizeVariant, HeroGroupTypeVariant, HeroTypeVariant, } from '../../utils/utils';
 export class HyHero {
   constructor() {
     this.heroType = HeroTypeVariant.landing;
     this.heroGroupType = HeroGroupTypeVariant.default;
     this.colorVariant = HeroColorVariant.blue;
+    this.sizeVariant = HeroSizeVariant.large;
     this.disableLazy = false;
     this.hasShortcuts = false;
     this.isExternal = false;
-    this.headerstyle = 'common';
   }
   async componentWillLoad() {
     this._sourceSet = await jsonParserWorker(this.sourceSet);
   }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
-      }
+  render() {
+    let variant = CtaLinkButtonVariants.heroWhite;
+    let colorVariantValue = this.colorVariant;
+    let heroTypeValue = this.heroType;
+    if (this.heroType === 'minor_landing') {
+      colorVariantValue = HeroColorVariant.white;
+      heroTypeValue = HeroTypeVariant.landing;
     }
-    this.setContentDivPosition();
-  }
-  setContentDivPosition() {
-    const contentDiv = document.querySelectorAll('.hy-hero__content--container')[0];
-    if (!contentDiv)
-      return;
-    if (document.body.scrollWidth <= 1200) {
-      contentDiv.style.left = '0';
+    if (colorVariantValue === HeroColorVariant.blue) {
+      variant = CtaLinkButtonVariants.heroBlue;
     }
-    if (document.body.scrollWidth >= 1201) {
-      const contentWrapper = document.querySelectorAll('div.hy-main-content-wrapper')[0];
-      if (!contentWrapper)
-        return;
-      if (document.body.scrollWidth >= 1441) {
-        const marginLeft = parseInt(window.getComputedStyle(contentWrapper).getPropertyValue('margin-left'));
-        if (marginLeft > 32) {
-          contentDiv.style.left = `${marginLeft}px`;
-        }
-        else if (marginLeft > 0) {
-          contentDiv.style.left = '32px';
-        }
-        else if (marginLeft == 0) {
-          contentDiv.style.left = '0px';
-        }
-      }
-      else {
-        contentDiv.style.left = window.getComputedStyle(contentWrapper).getPropertyValue('padding-left');
-      }
+    if (colorVariantValue === HeroColorVariant.black) {
+      variant = CtaLinkButtonVariants.heroBlack;
     }
-  }
-  resizeEventListener(event) {
-    if (!event)
-      return;
-    this.setContentDivPosition();
-  }
-  scrollToContent(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    const heroHeight = document.getElementsByClassName('hy-hero');
-    // Set here how much should the arrow scroll down.
-    const scrollAmount = heroHeight[0].offsetHeight / 2;
-    window.scrollBy({
-      top: scrollAmount,
-      left: 0,
-      behavior: 'smooth',
-    });
-  }
-  render() {
-    let variant = CtaLinkButtonVariants.onWhiteBkgd;
-    let colorVariantValue = HeroColorVariant.white;
-    // Hero on minor landing pages always uses White Background.
-    if (this.heroType !== HeroTypeVariant.minor_landing) {
-      colorVariantValue = this.colorVariant;
-      if (this.colorVariant == HeroColorVariant.black) {
-        variant = CtaLinkButtonVariants.onBlackBkgd;
-      }
-      else if (this.colorVariant == HeroColorVariant.blue) {
-        variant = CtaLinkButtonVariants.onBlueBkgd;
-      }
-      else if (this.colorVariant == HeroColorVariant.fp_white) {
-        colorVariantValue = HeroColorVariant.white;
-      }
+    if (!colorVariantValue || colorVariantValue === 'fp_white') {
+      colorVariantValue = HeroColorVariant.white;
     }
-    let classAttributesArray = [
+    let hyHeroClasses = [
       'hy-hero',
-      `hy-hero--${this.heroType}`,
+      `hy-hero--${heroTypeValue}`,
       `hy-hero--${this.heroGroupType}`,
-      `hy-hero__${this.headerstyle}`,
       `hy-hero--${colorVariantValue}`,
-    ];
-    let classHeroContainerArray = [
-      'hy-hero__container',
-      `hy-hero__container--${this.heroType}--${this.headerstyle}`,
-      `hy-hero__container--${this.heroType}`,
-      `${this.heroGroupType}`,
-      `${this.headerstyle}`,
-      `hy-hero__container--${colorVariantValue}`,
+      `hy-hero--${this.sizeVariant}`,
     ];
     // If there is a Shortcuts block after hero, add the class 'shortcuts' to remove underline.
     if (this.hasShortcuts) {
-      classAttributesArray.push('shortcuts');
-      classHeroContainerArray.push('shortcuts');
+      hyHeroClasses.push('has-shortcuts');
     }
-    const classAttributes = classAttributesArray.join(' ');
-    const classHeroContainer = classHeroContainerArray.join(' ');
-    const classDescription = [
-      'hy-hero__description',
-      `hy-hero__description__${this.headerstyle}`,
-      `hy-hero__description--${this.heroType}`,
-      `hy-hero__description--${colorVariantValue}`,
-    ].join(' ');
-    const classContentContainer = [
-      'hy-hero__content',
-      `hy-hero__content--${this.headerstyle}`,
-      `hy-hero__content--${this.heroType}`,
-    ].join(' ');
-    const classHeroTitle = [
-      'hy-hero__title',
-      `hy-hero__title--${this.heroType}`,
-      `hy-hero__title--${colorVariantValue}`,
-    ].join(' ');
-    const classHeroTitleOverlay = [
-      'hy-hero__title',
-      'hy-hero__title--overlay',
-      `hy-hero__title--overlay--${colorVariantValue}`,
-    ].join(' ');
-    const classHeroActions = ['hy-hero__actions', `hy-hero__actions--${this.heroType}`].join(' ');
-    const classHeroImage = ['hy-image__image', `hy-image__image--${this.heroType}`].join(' ');
-    const classHeroImageContainer = ['hy-hero__image-container', `hy-hero__image-container--${this.heroType}`].join(' ');
-    const classHeroContentContainer = [
-      'hy-hero__content-container',
-      `hy-hero__content-container--${this.heroType}`,
-      `hy-hero__content-container--${colorVariantValue}`,
-    ].join(' ');
-    const classSpacerBox = [
-      'hy-hero__spacer-box',
-      `hy-hero__spacer-box--${this.heroType}`,
-      `hy-hero__spacer-box--${colorVariantValue}`,
-    ].join(' ');
-    const classHeroTitleContainer = ['hy-hero__title-container', `hy-hero__title-container--${this.heroType}`].join(' ');
-    const classScrollButton = ['hy-hero__scroll-button', `${this.heroGroupType}`].join(' ');
     const aspectRatioWidth = 16;
     const aspectRatioHeight = 10;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
       '--aspectRatio': `${aspect}%`,
     };
-    // headingSection defines the font-sizes of h1 used in hero.
-    let headingSection = HeadingSectionVariants.landingMinor;
-    if (this.heroType == HeroTypeVariant.front_page) {
-      headingSection = HeadingSectionVariants.frontPage;
-    }
-    else if (this.heroType == HeroTypeVariant.landing) {
-      headingSection = HeadingSectionVariants.landingMajor;
-    }
+    const headingSection = HeadingSectionVariants.hero;
     return (h(Host, null,
-      h("div", { class: classAttributes },
-        h("div", { class: classHeroContainer },
-          h("div", { class: classHeroImageContainer, style: aspectRatio }, this.image &&
+      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.scLabel, class: classHeroImage, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.scLabel, class: classHeroImage, src: this.image })))),
-          h("div", { class: classSpacerBox }),
-          h("div", { class: classHeroContentContainer },
-            h("div", { class: classContentContainer },
-              h("div", { class: classHeroTitleContainer },
-                h("hy-heading", { class: classHeroTitle, heading: HeadingVarians.default, section: headingSection }, this.heading),
-                h("hy-heading", { class: classHeroTitleOverlay, heading: HeadingVarians.default, section: headingSection }, this.heading)),
-              this.description && h("p", { class: classDescription }, this.description),
-              this.url && (h("div", { class: classHeroActions },
-                h("hy-cta-button", { "link-content": this.urlTitle, "sc-label": this.scLabel, url: this.url, "is-external": this.isExternal, variant: variant })))))),
-        h("button", { onClick: (e) => this.scrollToContent(e), class: classScrollButton, type: "button", "aria-label": "Scroll to content" },
-          h("hy-icon", { class: "hy-hero__scroll-icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" }))),
+              h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.scLabel, class: `hy-image__image`, src: this.image }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.scLabel, 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("hy-heading", { class: `hy-hero__title`, heading: HeadingVarians.default, section: headingSection }, this.heading)),
+              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" })));
   }
   static get is() { return "hy-hero"; }
@@ -253,6 +143,29 @@ export class HyHero {
       "reflect": false,
       "defaultValue": "HeroColorVariant.blue"
     },
+    "sizeVariant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "HeroSizeVariant",
+        "resolved": "HeroSizeVariant.large | HeroSizeVariant.small",
+        "references": {
+          "HeroSizeVariant": {
+            "location": "import",
+            "path": "../../utils/utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size-variant",
+      "reflect": false,
+      "defaultValue": "HeroSizeVariant.large"
+    },
     "image": {
       "type": "string",
       "mutable": false,
@@ -409,24 +322,6 @@ export class HyHero {
       "reflect": false,
       "defaultValue": "false"
     },
-    "headerstyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "headerstyle",
-      "reflect": false,
-      "defaultValue": "'common'"
-    },
     "sourceSet": {
       "type": "string",
       "mutable": false,
@@ -450,11 +345,4 @@ export class HyHero {
     }
   }; }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "resizeEventListener",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
 }

package/dist/collection/components/hy-introduction/hy-introduction.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-key-figure/hy-key-figure.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-key-figure-group/hy-key-figure-group.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-key-highlight/hy-key-highlight.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-key-highlight-group/hy-key-highlight-group.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-large-process-flow/hy-large-process-flow.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

package/dist/collection/components/hy-large-process-flow-phase/hy-large-process-flow-phase.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;

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

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;
@@ -58,26 +60,233 @@
   display: block;
 }
 
-.hy-link-list .list-title {
-  color: var(--brand-main-nearly-black);
-  font-family: var(--main-font-family);
-  font-size: 16px;
-  font-weight: bold;
-  letter-spacing: -0.5px;
-  line-height: 24px;
+.hy-link-list {
+  margin-bottom: 32px;
+}
+
+.hy-link-list__links {
+  display: grid;
+  gap: 16px;
+  list-style: none;
   margin: 0;
-  padding-bottom: 19px;
+  padding: 0;
+}
+
+@media (min-width: 30rem) {
+  .hy-link-list__links--grid {
+    gap: 16px 24px;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 60rem) {
+  .without-sidebar .hy-link-list__links--grid.col-3 {
+    gap: 16px 24px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .hy-link-list__links--grid.col-3 {
+    gap: 16px 32px;
+  }
+}
+
+@media (min-width: 60rem) {
+  .without-sidebar .hy-link-list__links--grid.col-4 {
+    gap: 16px 24px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .hy-link-list__links--grid.col-4 {
+    gap: 16px 32px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .with-sidebar .hy-link-list__links--grid.col-3 {
+    gap: 16px 24px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .hy-link-list__links--grid.col-3 {
+    gap: 16px 32px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .with-sidebar .hy-link-list__links--grid.col-4 {
+    gap: 16px 24px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .hy-link-list__links--grid.col-4 {
+    gap: 16px 32px;
+  }
+}
+
+.hy-link-list__title {
+  font-weight: 700;
+  font-family: var(--main-font-family);
+  margin: 0 0 32px;
+  color: var(--brand-main-nearly-black);
+}
+
+.is-content-page h2.hy-link-list__title {
+  font-size: 1.625rem;
+  line-height: 32px;
+  letter-spacing: -0.82px;
+}
+
+@media (min-width: 30rem) {
+  .is-content-page h2.hy-link-list__title {
+    font-size: 1.875rem;
+    line-height: 36px;
+    letter-spacing: -0.6px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .is-content-page h2.hy-link-list__title {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .is-content-page h2.hy-link-list__title {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
+  }
+}
+
+.is-front-page h2.hy-link-list__title, .is-landing-page h2.hy-link-list__title {
+  font-size: 1.75rem;
+  line-height: 32px;
+  letter-spacing: -0.7px;
   text-transform: uppercase;
 }
 
 @media (min-width: 30rem) {
-  .hy-link-list .list-title {
-    font-size: 18px;
-    letter-spacing: -0.56px;
+  .is-front-page h2.hy-link-list__title, .is-landing-page h2.hy-link-list__title {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.85px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .is-front-page h2.hy-link-list__title, .without-sidebar .is-landing-page h2.hy-link-list__title {
+    font-size: 2.625rem;
+    line-height: 48px;
+    letter-spacing: -1.05px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .is-front-page h2.hy-link-list__title, .with-sidebar .is-landing-page h2.hy-link-list__title {
+    font-size: 2.625rem;
+    line-height: 48px;
+    letter-spacing: -1.05px;
+  }
+}
+
+.hy-two-columns h2.hy-link-list__title {
+  font-size: 1.125rem;
+  line-height: 22px;
+  letter-spacing: -0.45px;
+  margin-bottom: 16px;
+  text-transform: none;
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .hy-two-columns h2.hy-link-list__title {
+    font-size: 1.25rem;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .hy-two-columns h2.hy-link-list__title {
+    font-size: 1.25rem;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+}
+
+.is-content-page h3.hy-link-list__title {
+  font-size: 1.3125rem;
+  line-height: 28px;
+  letter-spacing: -0.42px;
+}
+
+@media (min-width: 30rem) {
+  .is-content-page h3.hy-link-list__title {
+    font-size: 1.5625rem;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+}
+
+.is-front-page h3.hy-link-list__title, .is-landing-page h3.hy-link-list__title {
+  font-size: 1.625rem;
+  line-height: 32px;
+  letter-spacing: -0.52px;
+}
+
+@media (min-width: 30rem) {
+  .is-front-page h3.hy-link-list__title, .is-landing-page h3.hy-link-list__title {
+    font-size: 1.875rem;
+    line-height: 36px;
+    letter-spacing: -0.6px;
+  }
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .is-front-page h3.hy-link-list__title, .without-sidebar .is-landing-page h3.hy-link-list__title {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .is-front-page h3.hy-link-list__title, .with-sidebar .is-landing-page h3.hy-link-list__title {
+    font-size: 2.125rem;
+    line-height: 40px;
+    letter-spacing: -0.68px;
   }
 }
 
-.hy-link-list hy-cta-link {
-  background-color: var(--grayscale-background-box);
-  margin: 8px 0;
+.hy-two-columns h3.hy-link-list__title {
+  font-size: 1.125rem;
+  line-height: 22px;
+  letter-spacing: -0.45px;
+  margin-bottom: 16px;
+  text-transform: none;
+}
+
+@media (min-width: 75.0625rem) {
+  .without-sidebar .hy-two-columns h3.hy-link-list__title {
+    font-size: 1.25rem;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+}
+
+@media (min-width: 1601px) {
+  .with-sidebar .hy-two-columns h3.hy-link-list__title {
+    font-size: 1.25rem;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
 }

package/dist/collection/components/hy-link-list/hy-link-list.js

@@ -5,6 +5,7 @@ export class HyLinkList {
   constructor() {
     this.headerstyle = 'default';
     this.listHeading = '';
+    this.headingVariant = 'h2';
   }
   async componentWillLoad() {
     this._dataItems = await jsonParserWorker(this.dataItems);
@@ -18,18 +19,20 @@ export class HyLinkList {
     }
   }
   render() {
-    const classAttributes = ['hy-link-list', `hy-link-list__${this.headerstyle}`].join(' ');
     const linkVariant = CtaLinkVariants.linkList;
+    const HeadingVariant = this.headingVariant.toLowerCase();
+    let columnType = 'col-3';
+    if (this._dataItems.length === 7 || this._dataItems.length % 4 === 0) {
+      columnType = 'col-4';
+    }
     return [
-      h("div", { class: classAttributes },
-        this.listHeading.length > 0 && h("h3", { class: 'list-title' }, this.listHeading),
-        this._dataItems.map((x) => {
-          return (h("hy-cta-link", { variant: linkVariant, "link-content": x.heading, "sc-label": x.ariaLabel, url: x.url, "is-external": x.isExternal }));
-        })),
+      h("section", { class: `hy-link-list hy-link-list__${this.headerstyle}` },
+        this.listHeading.length > 0 && (h(HeadingVariant, { class: 'hy-link-list__title' }, this.listHeading)),
+        h("ul", { class: `hy-link-list__links hy-link-list__links--${this.variation} ${this.variation === 'grid' ? columnType : ''}` }, this._dataItems.map(({ heading, ariaLabel, url, isExternal }) => (h("li", { class: "hy-link-list__links-item" },
+          h("hy-cta-link", { variant: linkVariant, "link-content": heading, "sc-label": ariaLabel, url: url, "is-external": isExternal })))))),
     ];
   }
   static get is() { return "hy-link-list"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["hy-link-list.scss"]
   }; }
@@ -93,6 +96,41 @@ export class HyLinkList {
       "attribute": "list-heading",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variation",
+      "reflect": false
+    },
+    "headingVariant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading-variant",
+      "reflect": false,
+      "defaultValue": "'h2'"
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/hy-list-item/hy-list-item.css

@@ -1,5 +1,7 @@
 :root {
   --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
   --brand-main-light: #107eab;
   --brand-main-active: #005379;
   --brand-main-dark: #003146;