@itcenteratunihelsinki/huds-lib 0.5.19 → 0.5.23

package/dist/collection/components/accordion-item/accordion-item.js

@@ -81,37 +81,35 @@ export class AccordionItem {
     }
   }
   handleClick(event) {
-    const containerId = this.el.parentElement.id;
-    let target = event.target;
-    const targetElement = target.tagName.toLowerCase();
-    const possibleTags = [targetElement].some((r) => ['svg', 'span', 'path', 'button', 'a'].indexOf(r) >= 0);
-    let accordion = document.querySelectorAll(`#${containerId}`)[0];
-    const allowMultiple = accordion.hasAttribute('data-allow-multiple');
-    const allowToggle = allowMultiple ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
-    if (target && possibleTags) {
-      if (targetElement !== 'button') {
-        target = target.closest('.hy-accordion__button');
-      }
+    const target = event.target;
+    const accordionContainer = this.el.parentElement;
+    const allowMultiple = accordionContainer.hasAttribute('data-allow-multiple');
+    const allowToggle = allowMultiple ? allowMultiple : accordionContainer.hasAttribute('data-allow-toggle');
+    if (target && target.tagName.toLowerCase() === 'button') {
       let targetParent = target.closest('.hy-accordion__item');
-      let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
-      const isExpanded = target.getAttribute('aria-expanded') == 'true';
-      const active = accordion.querySelector('[aria-expanded="true"]');
-      if (!allowMultiple && active && active !== target) {
-        active.setAttribute('aria-expanded', 'false');
+      let targetContent = targetParent.getElementsByClassName('hy-accordion__content')[0];
+      const isExpanded = target.getAttribute('aria-expanded') === 'true';
+      const activeButtonElement = accordionContainer.querySelector('[aria-expanded="true"]');
+      if (!allowMultiple && activeButtonElement && activeButtonElement !== target) {
+        activeButtonElement.setAttribute('aria-expanded', 'false');
         this.collapseSection(targetContent);
         if (targetParent.classList.contains('hy-accordion__item__is-open')) {
           targetParent.classList.remove('hy-accordion__item__is-open');
         }
-        accordion.querySelector(`#${active.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
+        accordionContainer
+          .querySelector(`#${activeButtonElement.getAttribute('aria-controls')}`)
+          .setAttribute('aria-hidden', 'true');
         if (!allowToggle) {
-          active.removeAttribute('aria-disabled');
+          activeButtonElement.removeAttribute('aria-disabled');
         }
       }
       if (!isExpanded) {
         this.expandSection(targetContent);
         target.setAttribute('aria-expanded', 'true');
         targetParent.classList.add('hy-accordion__item__is-open');
-        accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
+        accordionContainer
+          .querySelector(`#${target.getAttribute('aria-controls')}`)
+          .setAttribute('aria-hidden', 'false');
         if (!allowToggle) {
           target.setAttribute('aria-disabled', 'true');
         }
@@ -122,7 +120,9 @@ export class AccordionItem {
         if (targetParent.classList.contains('hy-accordion__item__is-open')) {
           targetParent.classList.remove('hy-accordion__item__is-open');
         }
-        accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'true');
+        accordionContainer
+          .querySelector(`#${target.getAttribute('aria-controls')}`)
+          .setAttribute('aria-hidden', 'true');
       }
       event.preventDefault();
       event.stopImmediatePropagation();

package/dist/collection/components/heading/heading.js

@@ -15,11 +15,6 @@ export class Heading {
     this.headerstyle = 'common';
     this.hasChildren = true;
   }
-  componentWillLoad() {
-    if (!this.el.textContent) {
-      this.hasChildren = false;
-    }
-  }
   componentDidLoad() {
     let hyMainDiv = this.el.closest('.hy-main');
     if (hyMainDiv) {
@@ -27,6 +22,9 @@ export class Heading {
         this.headerstyle = 'large';
       }
     }
+    if (this.el.parentElement.classList.contains('hy-hero__title-container')) {
+      this.hasChildren = false;
+    }
   }
   render() {
     const headingInVariants = this.heading in HeadingVarians;
@@ -58,7 +56,6 @@ export class Heading {
       h("span", { class: sectionClassAttributes })))));
   }
   static get is() { return "hy-heading"; }
-  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "default": ["heading.scss"],
     "wide": ["heading-fw.scss"]
@@ -189,7 +186,7 @@ export class Heading {
         "text": ""
       },
       "attribute": "hyphenated-text",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get states() { return {

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

@@ -211,24 +211,60 @@
   position: relative;
 }
 
-.hy-hero__title h1 {
+h1.hy-hero__title {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-}
-
-.hy-hero--blue .hy-hero__title h1 {
+  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 h1.hy-hero__title {
   color: var(--grayscale-white) !important;
 }
 
-.hy-hero--black .hy-hero__title h1 {
+.hy-hero--black h1.hy-hero__title {
   color: var(--grayscale-white) !important;
 }
 
-.hy-hero--white .hy-hero__title h1 {
+.hy-hero--white h1.hy-hero__title {
   color: var(--grayscale-black) !important;
 }
 
+h1.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;
+}
+
+@media (min-width: 1024px) {
+  h1.hy-hero__title.hy-heading__hero {
+    font-size: 2.875rem;
+    line-height: 54px;
+    letter-spacing: -1.15px;
+  }
+}
+
+@media (min-width: 1601px) {
+  h1.hy-hero__title.hy-heading__hero {
+    font-size: 3.25rem;
+    line-height: 60px;
+    letter-spacing: -1.3px;
+  }
+}
+
 .hy-hero__description {
   font-size: 1rem;
   line-height: 24px;

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

@@ -2,7 +2,7 @@ let timeout = null;
 let delay = 250;
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 import { jsonParserWorker } from '../../global/globalScript';
-import { CtaLinkButtonVariants, HeadingSectionVariants, HeadingVarians, HeroColorVariant, HeroSizeVariant, HeroGroupTypeVariant, HeroTypeVariant, } from '../../utils/utils';
+import { CtaLinkButtonVariants, HeroColorVariant, HeroSizeVariant, HeroGroupTypeVariant, HeroTypeVariant, } from '../../utils/utils';
 export class HyHero {
   constructor() {
     this.heroType = HeroTypeVariant.landing;
@@ -52,13 +52,14 @@ export class HyHero {
     if (!colorVariantValue || colorVariantValue === 'fp_white') {
       colorVariantValue = HeroColorVariant.white;
     }
-    let hyHeroClasses = [
+    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');
@@ -69,7 +70,6 @@ export class HyHero {
     const aspectRatio = {
       '--aspectRatio': `${aspect}%`,
     };
-    const headingSection = HeadingSectionVariants.hero;
     window.onload = () => {
       const heroElement = document.getElementsByClassName('hy-hero')[0];
       this.handleHeroImageObjectFitValue(this.sizeVariant, heroElement);
@@ -90,7 +90,7 @@ export class HyHero {
             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, hyphenatedText: this.heading })),
+                  h("h1", { 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 }))))))),
@@ -106,7 +106,7 @@ export class HyHero {
           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, hyphenatedText: this.heading })),
+                h("h1", { 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 }))))))),

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

@@ -197,15 +197,17 @@
 
 .hy-list-item__degree__image-container {
   display: block;
-  min-width: 100%;
   position: relative;
-  width: 100%;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 @media (min-width: 30rem) {
   .hy-list-item__degree__image-container {
-    min-width: 24%;
-    width: 24%;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 24%;
+    flex: 0 0 24%;
   }
 }
 
@@ -254,6 +256,9 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;

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

@@ -50,7 +50,7 @@ export class Menu {
       },
     ];
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     this.breadcrumbs = [];
   }
   componentWillUpdate() {
@@ -90,13 +90,11 @@ export class Menu {
             h("div", { id: 'menu-bc-container', class: {
                 'hy-mobile-menu__breadcrumbs': true,
                 'is-empty': this.breadcrumbs.length === 0,
-              } },
-              h("hy-menu-language", { "is-mobile": true, "data-menu-language": this.dataMenuLanguage }),
-              this.breadcrumbs.length ? ([
-                this.breadcrumbs.map((breadcrumb) => {
-                  return (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: breadcrumb.label, bid: breadcrumb.bid }));
-                }),
-              ]) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))),
+              } }, this.breadcrumbs.length ? ([
+              this.breadcrumbs.map((breadcrumb) => {
+                return (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.labelFrontPage, label: breadcrumb.label, bid: breadcrumb.bid }));
+              }),
+            ]) : (h("hy-menu-mobile-breadcrumb", { "label-back": this.menuButtonBreadcrumbReturn, "label-front-page": this.menuButtonBreadcrumbHome, label: this.menuButtonBreadcrumbHome, "is-first": true, "logo-url": this.logoUrl }))),
             h("button", { class: `hy-mobile-menu__menu-close-button`, "aria-label": "Close menu", disabled: true, "aria-hidden": "true" },
               h("span", null, "Close"),
               h("hy-icon", { icon: 'hy-icon-remove', size: 16 }))),
@@ -370,6 +368,23 @@ export class Menu {
       },
       "attribute": "menu-button-breadcrumb-logourl",
       "reflect": false
+    },
+    "dataSiteHeaderLabels": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-site-header-labels",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/paragraph-text/paragraph-text.css

@@ -414,9 +414,6 @@
   color: var(--link-blue);
   font-family: var(--main-font-family);
   font-weight: 600;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
 }
 
 @media (min-width: 30rem) {
@@ -439,19 +436,24 @@
 }
 
 .hy-paragraph-text a[target=_blank]:after {
-  display: block;
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  display: inline-block;
+  vertical-align: middle;
+  width: 12px;
+  height: 12px;
   margin-left: 3px;
+  background-size: contain;
+  content: "";
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(4,121,165)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
   -webkit-transform: rotate(315deg);
   transform: rotate(315deg);
 }
 
 .hy-paragraph-text a[target=_blank]:after:hover {
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='pink'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
 }
 
 .hy-paragraph-text a[target=_blank]:hover:after {
-  content: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
+  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 30 29' fill='rgb(14,104,139)'> <polygon points='29.207 13.783 14.756 .717 14.055 0 11.402 3.118 10.732 3.835 19.665 11.974 0 11.974 0 17.026 19.756 17.026 11.494 24.447 10.823 25.071 11.402 25.882 13.476 28.189 14.055 29 30 14.594' /> </svg>");
 }
 
 .hy-paragraph-text p {

package/dist/collection/components/person-profile/person-profile-listing/person-profile-listing.css

@@ -0,0 +1,188 @@
+:root {
+  --brand-main: #0e688b;
+  --brand-main-soft: #b1e7ff;
+  --brand-main-bright: #48c5f8;
+  --brand-main-light: #107eab;
+  --brand-main-active: #005379;
+  --brand-main-dark: #003146;
+  --brand-main-nearly-black: #000222;
+  --link-blue: #0479a4;
+  --link-disabled: #767676;
+  --grayscale-white: #fff;
+  --grayscale-slightly-gray: #fefefe;
+  --grayscale-light: #f8f8f8;
+  --grayscale-medium: #d2d2d2;
+  --grayscale-background-box: #f5f5f5;
+  --grayscale-tabs-border: #e6e6e6;
+  --grayscale-background-arrow: #dfdfdf;
+  --grayscale-medium-dark: #979797;
+  --grayscale-dark: #555555;
+  --grayscale-dark-text: #222222;
+  --grayscale-black: #000000;
+  --additional-red-light: #e5053a;
+  --additional-red-dark: #a31621;
+  --additional-purple-light: #420039;
+  --additional-yellow: #f9a21a;
+  --additional-skyblue: #48c5f8;
+  --additional-orange: #d14600;
+  --additional-green-light: #96ba3c;
+  --additional-green-dark: #006400;
+  --hover-gray: #eaeaea;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+:root {
+  --gutter-mobile: 16px;
+  --gutter-narrow: 24px;
+  --gutter-medium: 24px;
+  --gutter-wide: 24px;
+  --gutter-extrawide: 32px;
+}
+
+/**
+ * Mixin for fluid type.
+ * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
+ */
+
+:root {
+  --breakpoint-extrawide: 75.0625rem;
+  --breakpoint-max-width: 75.0625rem;
+  --breakpoint-medium: 48rem;
+  --breakpoint-narrow: 30rem;
+  --breakpoint-wide: 60rem;
+}
+
+.hy-person-profile-listing {
+  font-family: var(--main-font-family);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: grid;
+  gap: 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing {
+    gap: 32px 24px;
+  }
+}
+
+@media (min-width: 120.0625rem) {
+  .hy-person-profile-listing.col-2 {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+.hy-person-profile-listing.col-4 {
+  gap: 32px 24px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (min-width: 60rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(3, calc(100% / 3));
+  }
+}
+
+@media (min-width: 120.0625rem) {
+  .hy-person-profile-listing.col-4 {
+    grid-template-columns: repeat(4, 25%);
+  }
+}
+
+.hy-person-profile-listing__label {
+  font-size: 0.9375rem;
+  line-height: 18px;
+  font-weight: 700;
+  letter-spacing: -0.28px;
+  color: var(--grayscale-black);
+  margin: 0 0 8px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__label {
+    font-size: 1.0625rem;
+    line-height: 20px;
+    letter-spacing: -0.32px;
+  }
+}
+
+.hy-person-profile-listing__items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.is-inline .hy-person-profile-listing__items {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 0;
+}
+
+.text-tight .hy-person-profile-listing__items {
+  gap: 0;
+}
+
+.hy-person-profile-listing__item {
+  font-size: 0.9375rem;
+  line-height: 22px;
+  font-weight: 400;
+  color: var(--grayscale-black);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__item {
+    font-size: 1.0625rem;
+    line-height: 26px;
+  }
+}
+
+.hy-person-profile-listing__item a {
+  text-decoration: none;
+  color: var(--link-blue);
+}
+
+.hy-person-profile-listing__item a:hover {
+  text-decoration: underline;
+}
+
+.hy-person-profile-listing__item hy-icon {
+  display: none !important;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 28px;
+  width: 28px;
+}
+
+@media (min-width: 48rem) {
+  .hy-person-profile-listing__item hy-icon {
+    display: -webkit-inline-box !important;
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+.without-icons .hy-person-profile-listing__item hy-icon {
+  display: none !important;
+}

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

@@ -0,0 +1,124 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PersonProfile {
+  constructor() {
+    this.col = 'col-2';
+  }
+  render() {
+    return (h(Host, null,
+      h("ul", { class: `hy-person-profile-listing ${this.col} ${this.inline ? 'is-inline' : ''} ${this.withoutIcons ? 'without-icons' : ''} ${this.textSpacingTight ? 'text-tight' : ''}` }, this.items.map(({ label, items }) => {
+        if (items.filter(({ label, url }) => label !== '' && url !== '').length > 0) {
+          return (h("li", null,
+            h("h3", { class: "hy-person-profile-listing__label" }, label),
+            h("ul", { class: "hy-person-profile-listing__items" }, items.map(({ label, url }, index) => {
+              if (url) {
+                return (h("li", { class: "hy-person-profile-listing__item" },
+                  h("a", { href: url },
+                    index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                    h("span", null, label))));
+              }
+              return (h("li", { class: "hy-person-profile-listing__item" },
+                index !== 0 && h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                h("span", null, label)));
+            }))));
+        }
+      }))));
+  }
+  static get is() { return "hy-person-profile-listing"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["person-profile-listing.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["person-profile-listing.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "personProfileListingItems",
+        "resolved": "[{ label: string; items: string[]; }]",
+        "references": {
+          "personProfileListingItems": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "col": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'col-1' | 'col-2' | 'col-4'",
+        "resolved": "\"col-1\" | \"col-2\" | \"col-4\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "col",
+      "reflect": false,
+      "defaultValue": "'col-2'"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inline",
+      "reflect": false
+    },
+    "withoutIcons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "without-icons",
+      "reflect": false
+    },
+    "textSpacingTight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text-spacing-tight",
+      "reflect": false
+    }
+  }; }
+}