@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

package/dist/collection/components/grid-row/grid-row.js

@@ -1,8 +1,8 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class GridRow {
   render() {
-    const classAttributes = ['hy-grid__row'];
-    return (h(Host, { class: classAttributes.join(' ') }, h("slot", null)));
+    const classAttributes = ["hy-grid__row"];
+    return (h(Host, { class: classAttributes.join(" ") }, h("slot", null)));
   }
   static get is() { return "hy-grid-row"; }
   static get originalStyleUrls() {

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

@@ -1,46 +1,46 @@
-import { h, Host } from '@stencil/core';
-import { HeadingSectionVariants, HeadingVarians } from '../../utils/utils';
+import { h, Host } from "@stencil/core";
+import { HeadingSectionVariants, HeadingVarians } from "../../utils/utils";
 export class Heading {
   constructor() {
     this.heading = HeadingVarians.default;
     this.isSearch = false;
     this.section = HeadingSectionVariants.default;
     this.negative = false;
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.hyphenatedText = undefined;
     this.hasChildren = true;
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
-    if (this.el.parentElement.classList.contains('hy-hero__title-container')) {
+    if (this.el.parentElement.classList.contains("hy-hero__title-container")) {
       this.hasChildren = false;
     }
   }
   render() {
     const headingInVariants = this.heading in HeadingVarians;
     const classAttributes = [
-      'hy-heading',
-      this.negative ? 'negative' : '',
-      this.isSearch ? 'hy-heading__search' : '',
-      this.isSearch ? `hy-heading__search__${this.headerstyle}` : '',
+      "hy-heading",
+      this.negative ? "negative" : "",
+      this.isSearch ? "hy-heading__search" : "",
+      this.isSearch ? `hy-heading__search__${this.headerstyle}` : "",
       `hy-heading__${this.section}`,
       `hy-heading__${this.headerstyle}`,
       `hy-heading__${this.section}__${this.headerstyle}`,
     ];
-    const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(' ');
+    const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(" ");
     const containerSectionClass = [
-      'hy-heading__container',
+      "hy-heading__container",
       `hy-heading__container__${this.section}`,
       `hy-heading__container__${this.headerstyle}`,
-    ].join(' ');
+    ].join(" ");
     return (h(Host, null, headingInVariants ? ([
-      h("div", { class: containerSectionClass }, this.hyphenatedText && !this.hasChildren ? (h(this.heading, { class: classAttributes.join(' '), innerHTML: this.hyphenatedText })) : (h(this.heading, { class: classAttributes.join(' ') }, h("slot", null))), h("span", { class: sectionClassAttributes })),
-    ]) : (h("div", { class: containerSectionClass }, this.hyphenatedText && !this.hasChildren ? (h(HeadingVarians.default, { class: classAttributes.join(' ') }, h("span", { innerHTML: this.hyphenatedText }))) : (h(HeadingVarians.default, { class: classAttributes.join(' ') }, h("span", null, h("slot", null)))), h("span", { class: sectionClassAttributes })))));
+      h("div", { class: containerSectionClass }, this.hyphenatedText && !this.hasChildren ? (h(this.heading, { class: classAttributes.join(" "), innerHTML: this.hyphenatedText })) : (h(this.heading, { class: classAttributes.join(" ") }, h("slot", null))), h("span", { class: sectionClassAttributes })),
+    ]) : (h("div", { class: containerSectionClass }, this.hyphenatedText && !this.hasChildren ? (h(HeadingVarians.default, { class: classAttributes.join(" ") }, h("span", { innerHTML: this.hyphenatedText }))) : (h(HeadingVarians.default, { class: classAttributes.join(" ") }, h("span", null, h("slot", null)))), h("span", { class: sectionClassAttributes })))));
   }
   static get is() { return "hy-heading"; }
   static get originalStyleUrls() {
@@ -161,7 +161,7 @@ export class Heading {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "hyphenatedText": {
         "type": "string",

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

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { jsonParserWorker } from '../../global/globalScript';
+import { Host, h } from "@stencil/core";
+import { jsonParserWorker } from "../../global/globalScript";
 export class HyAnchorLinkList {
   constructor() {
     this.listTitle = undefined;
@@ -12,30 +12,30 @@ export class HyAnchorLinkList {
     this._anchorItems = await jsonParserWorker(this.anchorItems);
   }
   handleLinkClick(e) {
-    const targetId = e.target.getAttribute('href');
+    const targetId = e.target.getAttribute("href");
     if (targetId) {
       const targetElement = document.getElementById(targetId.substring(1));
       const targetRect = targetElement.getBoundingClientRect();
-      window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: 'smooth' });
-      targetElement.setAttribute('tabIndex', '-1');
+      window.scrollTo({ top: window.scrollY + targetRect.top - 100, behavior: "smooth" });
+      targetElement.setAttribute("tabIndex", "-1");
       targetElement.focus({ preventScroll: true });
     }
     e.preventDefault();
     e.stopPropagation();
   }
   render() {
-    const classAttributes = ['hy-anchor-link-list'].join(' ');
+    const classAttributes = ["hy-anchor-link-list"].join(" ");
     const buttonClasses = {
-      'hy-anchor-link-list__button': true,
-      'is-open': this.isOpen,
+      "hy-anchor-link-list__button": true,
+      "is-open": this.isOpen,
     };
     const containerClasses = {
-      'hy-anchor-link-list__container': true,
-      'is-open': this.isOpen,
+      "hy-anchor-link-list__container": true,
+      "is-open": this.isOpen,
     };
     const items = this._anchorItems;
-    return (h(Host, { class: classAttributes }, h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, h("span", { class: "hy-anchor-link-list__button--title" }, h("hy-icon", { icon: 'hy-icon-bullet-list', size: 18, fill: 'var(--brand-main)' }), this.listTitle), h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, h("hy-icon", { class: "label-close-icon", icon: 'hy-icon-caret-down', size: 16, fill: 'var(--brand-main)' }))), h("div", { "aria-hidden": this.isOpen ? 'false' : 'true', class: containerClasses }, items &&
-      items.map((item) => (h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, h("hy-icon", { icon: 'hy-icon-arrow-down', size: 12, fill: 'var(--brand-main)' }), item.title))))));
+    return (h(Host, { class: classAttributes }, h("button", { "aria-label": this.listTitle, onClick: () => (this.isOpen = !this.isOpen), class: buttonClasses }, h("span", { class: "hy-anchor-link-list__button--title" }, h("hy-icon", { icon: "hy-icon-bullet-list", size: 18, fill: "var(--brand-main)" }), this.listTitle), h("span", { class: "hy-anchor-link-list__button--label" }, this.isOpen ? this.closeLabel : this.openLabel, h("hy-icon", { class: "label-close-icon", icon: "hy-icon-caret-down", size: 16, fill: "var(--brand-main)" }))), h("div", { "aria-hidden": this.isOpen ? "false" : "true", class: containerClasses }, items &&
+      items.map((item) => (h("a", { class: "hy-anchor-link-list__item", href: item.url, onClick: this.handleLinkClick }, h("hy-icon", { icon: "hy-icon-arrow-down", size: 12, fill: "var(--brand-main)" }), item.title))))));
   }
   static get is() { return "hy-anchor-link-list"; }
   static get originalStyleUrls() {
@@ -110,7 +110,7 @@ export class HyAnchorLinkList {
           "references": {
             "AnchorItem": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-anchor-link-list/hy-anchor-link-list.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-anchor-link-list/hy-anchor-link-list.tsx"
             }
           }
         },

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

@@ -1,11 +1,11 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class HyBadge {
   constructor() {
-    this.variant = 'primary';
+    this.variant = "primary";
   }
   render() {
-    const classAttributes = ['hy-badge', this.variant];
-    return (h(Host, null, h("span", { class: classAttributes.join(' ') }, h("slot", null))));
+    const classAttributes = ["hy-badge", this.variant];
+    return (h(Host, null, h("span", { class: classAttributes.join(" ") }, h("slot", null))));
   }
   static get is() { return "hy-badge"; }
   static get encapsulation() { return "shadow"; }
@@ -25,7 +25,7 @@ export class HyBadge {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary' | 'warn' | 'success' | 'disabled'",
+          "original": "\"primary\" | \"warn\" | \"success\" | \"disabled\"",
           "resolved": "\"disabled\" | \"primary\" | \"success\" | \"warn\"",
           "references": {}
         },
@@ -37,7 +37,7 @@ export class HyBadge {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'primary'"
+        "defaultValue": "\"primary\""
       }
     };
   }

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { CtaLinkButtonVariants } from '../../utils/utils';
+import { h, Host } from "@stencil/core";
+import { CtaLinkButtonVariants } from "../../utils/utils";
 export class HyBanner {
   constructor() {
     this.textTitle = undefined;
@@ -7,30 +7,30 @@ export class HyBanner {
     this.url = undefined;
     this.scLabel = undefined;
     this.urlTitle = undefined;
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.isExternal = false;
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
   }
   render() {
-    const hyBannerClass = ['hy-banner', `hy-banner__${this.headerstyle}`, this.headerstyle].join(' ');
-    const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
+    const hyBannerClass = ["hy-banner", `hy-banner__${this.headerstyle}`, this.headerstyle].join(" ");
+    const hyBannerWrapperClass = ["hy-banner__info-container"].join(" ");
     const hyBannerTitle = [
-      'hy-banner__info-container__title',
+      "hy-banner__info-container__title",
       `hy-banner__info-container__title__${this.headerstyle}`,
       this.headerstyle,
-    ].join(' ');
+    ].join(" ");
     const hyBannerDescription = [
-      'hy-banner__info-container__description',
+      "hy-banner__info-container__description",
       `hy-banner__info-container__description__${this.headerstyle}`,
       this.headerstyle,
-    ].join(' ');
+    ].join(" ");
     const variant = CtaLinkButtonVariants.onBlueBkgd;
     return (h(Host, null, h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }), h("div", { class: hyBannerClass }, h("hy-main-content-wrapper", null, h("div", { class: hyBannerWrapperClass }, h("div", { class: hyBannerTitle }, this.textTitle), h("div", { class: hyBannerDescription }, this.textDescription), this.url && (h("div", { class: "hy-banner__info-container__link" }, 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: "1.75, 1.75, 2, 2.5" })));
   }
@@ -149,7 +149,7 @@ export class HyBanner {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "isExternal": {
         "type": "boolean",

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

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { css } from 'emotion';
+import { h, Host } from "@stencil/core";
+import { css } from "emotion";
 /*
 Example of using hy-box:
 <hy-box mb="1.75, 1.75, 2, 2.5" />
@@ -10,9 +10,9 @@ wide, 60rem to 75rem or 60rem to 100.0625rem (depending on hasSidebar) (mb[2])
 xlarge, > 100.0625: 2.5rem (mb[3])
 * */
 const toRemValue = (val) => {
-  return typeof val === 'number' ? `${val}rem` : undefined;
+  return typeof val === "number" ? `${val}rem` : undefined;
 };
-const breakpoints = ['30rem', '60rem', '75.0625rem', '100.0625rem'];
+const breakpoints = ["30rem", "60rem", "75.0625rem", "100.0625rem"];
 /*
 Default - mobile
 mq[0] - tablet
@@ -33,12 +33,12 @@ const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, wid
     margin-bottom: ${toRemValue(mb[0])};
     margin-left: ${toRemValue(ml[0])};
     height: ${toRemValue(h)};
-    background-color: ${!!bg ? `var(--${bg})` : 'transparent'};
+    background-color: ${!!bg ? `var(--${bg})` : "transparent"};
     width: ${width[0]};
     display: flex;
-    flex-flow: ${direction || 'row'};
-    justify-content: ${justify || 'flex-start'};
-    align-items: ${align || 'flex-start'};
+    flex-flow: ${direction || "row"};
+    justify-content: ${justify || "flex-start"};
+    align-items: ${align || "flex-start"};
 
     ${mq[0]} {
       width: ${width[1]};
@@ -94,10 +94,10 @@ const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, wid
     }
   `;
 };
-const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(',').map((v) => `${v.trim()}`).map((v) => parseFloat(v));
+const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(",").map((v) => `${v.trim()}`).map((v) => parseFloat(v));
 export class HyBox {
   constructor() {
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.p = undefined;
     this.pl = undefined;
     this.pr = undefined;
@@ -108,18 +108,18 @@ export class HyBox {
     this.mr = undefined;
     this.mb = undefined;
     this.mt = undefined;
-    this.justify = 'flex-start';
-    this.align = 'baseline';
+    this.justify = "flex-start";
+    this.align = "baseline";
     this.h = undefined;
-    this.bg = 'transparent';
-    this.width = '100';
-    this.direction = 'row';
+    this.bg = "transparent";
+    this.width = "100";
+    this.direction = "row";
   }
   componentWillLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'large';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
       }
     }
   }
@@ -133,7 +133,7 @@ export class HyBox {
     const mb = (_m = (_l = toNumArray(this.mb)) !== null && _l !== void 0 ? _l : toNumArray(this.m)) !== null && _m !== void 0 ? _m : [0];
     const mr = (_p = (_o = toNumArray(this.mr)) !== null && _o !== void 0 ? _o : toNumArray(this.m)) !== null && _p !== void 0 ? _p : [0];
     const ml = (_r = (_q = toNumArray(this.ml)) !== null && _q !== void 0 ? _q : toNumArray(this.m)) !== null && _r !== void 0 ? _r : [0];
-    const hasSidebar = this.headerstyle == 'common';
+    const hasSidebar = this.headerstyle == "common";
     return (h(Host, { class: createCssClass({
         hasSidebar,
         pt,
@@ -146,7 +146,7 @@ export class HyBox {
         mb,
         h: this.h,
         bg: this.bg,
-        width: this.width.split(',').map((v) => `${v.trim()}%`),
+        width: this.width.split(",").map((v) => `${v.trim()}%`),
         justify: this.justify,
         align: this.align,
         direction: this.direction,
@@ -181,7 +181,7 @@ export class HyBox {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "p": {
         "type": "string",
@@ -369,7 +369,7 @@ export class HyBox {
         },
         "attribute": "justify",
         "reflect": false,
-        "defaultValue": "'flex-start'"
+        "defaultValue": "\"flex-start\""
       },
       "align": {
         "type": "string",
@@ -387,7 +387,7 @@ export class HyBox {
         },
         "attribute": "align",
         "reflect": false,
-        "defaultValue": "'baseline'"
+        "defaultValue": "\"baseline\""
       },
       "h": {
         "type": "number",
@@ -422,7 +422,7 @@ export class HyBox {
         },
         "attribute": "bg",
         "reflect": false,
-        "defaultValue": "'transparent'"
+        "defaultValue": "\"transparent\""
       },
       "width": {
         "type": "string",
@@ -440,7 +440,7 @@ export class HyBox {
         },
         "attribute": "width",
         "reflect": false,
-        "defaultValue": "'100'"
+        "defaultValue": "\"100\""
       },
       "direction": {
         "type": "string",
@@ -458,7 +458,7 @@ export class HyBox {
         },
         "attribute": "direction",
         "reflect": false,
-        "defaultValue": "'row'"
+        "defaultValue": "\"row\""
       }
     };
   }

package/dist/collection/components/hy-box-container/hy-box-container.js

@@ -1,16 +1,16 @@
-import { Host, h } from '@stencil/core';
-import { css } from 'emotion';
+import { Host, h } from "@stencil/core";
+import { css } from "emotion";
 export class HyBoxContainer {
   constructor() {
     this.wrap = true;
     this.maxWidth = true;
   }
   render() {
-    return (h(Host, { style: { width: '100%', display: 'flex', flex: '1', justifyContent: 'center' } }, h("div", { class: css `
+    return (h(Host, { style: { width: "100%", display: "flex", flex: "1", justifyContent: "center" } }, h("div", { class: css `
             display: flex;
             width: 100%;
-            flex-wrap: ${this.wrap ? 'wrap' : 'no-wrap'};
-            max-width: ${this.maxWidth ? '90rem' : '100%'};
+            flex-wrap: ${this.wrap ? "wrap" : "no-wrap"};
+            max-width: ${this.maxWidth ? "90rem" : "100%"};
           ` }, h("slot", null))));
   }
   static get is() { return "hy-box-container"; }

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

@@ -1,26 +1,26 @@
-import { h } from '@stencil/core';
-import { BreadcrumbVariants } from '../../utils/utils';
-import { jsonParserWorker } from '../../global/globalScript';
+import { h } from "@stencil/core";
+import { BreadcrumbVariants } from "../../utils/utils";
+import { jsonParserWorker } from "../../global/globalScript";
 export class HyBreadcrumbs {
   constructor() {
     this.dataItems = undefined;
     this.variant = BreadcrumbVariants.default;
-    this.headerstyle = 'with-sidebar';
+    this.headerstyle = "with-sidebar";
     this.menuOpen = false;
   }
   async componentWillLoad() {
     this._dataItems = await jsonParserWorker(this.dataItems);
   }
   componentDidLoad() {
-    let hyMainDiv = this.el.closest('.hy-main');
+    let hyMainDiv = this.el.closest(".hy-main");
     if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains('with-sidebar')) {
-        this.headerstyle = 'without-sidebar';
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "without-sidebar";
       }
     }
   }
   render() {
-    const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
+    const breadcrumbsClass = ["hy-breadcrumbs", this.variant, this.headerstyle].join(" ");
     return (h("nav", { "aria-label": "Breadcrumb", role: "navigation", "aria-labelledby": "system-breadcrumb", class: breadcrumbsClass }, h("ol", { class: "breadcrumb-container" }, this._dataItems.map((item) => {
       if (item.url.length > 0) {
         return (h("li", { class: "breadcrumb-item" }, h("a", { class: "breadcrumb-item__link", href: item.url }, item.text), h("hy-icon", { class: "breadcrumb-item__icon", icon: "hy-icon-caret-right", size: 12 })));
@@ -52,7 +52,7 @@ export class HyBreadcrumbs {
           "references": {
             "Breadcrumb": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx"
             }
           }
         },
@@ -104,7 +104,7 @@ export class HyBreadcrumbs {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'with-sidebar'"
+        "defaultValue": "\"with-sidebar\""
       }
     };
   }

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

@@ -1,5 +1,5 @@
-import { Host, h } from '@stencil/core';
-import { CheckboxVariants } from '../../utils/utils';
+import { Host, h } from "@stencil/core";
+import { CheckboxVariants } from "../../utils/utils";
 export class HyCheckbox {
   constructor() {
     this.checkboxId = undefined;
@@ -10,10 +10,10 @@ export class HyCheckbox {
   }
   render() {
     switch (this.variant) {
-      case 'button':
-        return (h(Host, { class: "hy-checkbox--button" }, h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` }, this.checkboxLabel, h("span", { class: "hy-checkbox--button__checkmark" }, h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: 'hy-icon-done', size: 14, "aria-hidden": "true" })))));
+      case "button":
+        return (h(Host, { class: "hy-checkbox--button" }, h("input", { type: "checkbox", class: "hy-checkbox--button__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox--button__label", htmlFor: `${this.checkboxId}` }, this.checkboxLabel, h("span", { class: "hy-checkbox--button__checkmark" }, h("hy-icon", { class: "hy-checkbox--button__label-icon", icon: "hy-icon-done", size: 14, "aria-hidden": "true" })))));
       default:
-        return (h(Host, { class: "hy-checkbox" }, h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` }, h("span", { class: "hy-checkbox__checkmark" }, h("hy-icon", { class: "hy-checkbox__label-icon", icon: 'hy-icon-done', size: 23, "aria-hidden": "true" })), this.checkboxLabel)));
+        return (h(Host, { class: "hy-checkbox" }, h("input", { type: "checkbox", class: "hy-checkbox__checkbox", checked: this.checkboxChecked, id: `${this.checkboxId}`, value: `${this.checkboxValue}` }), h("label", { class: "hy-checkbox__label", htmlFor: `${this.checkboxId}` }, h("span", { class: "hy-checkbox__checkmark" }, h("hy-icon", { class: "hy-checkbox__label-icon", icon: "hy-icon-done", size: 23, "aria-hidden": "true" })), this.checkboxLabel)));
     }
   }
   static get is() { return "hy-checkbox"; }

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class HyCollaboration {
   constructor() {
     this.textDescription = undefined;
@@ -8,7 +8,7 @@ export class HyCollaboration {
     this.imageAltText = undefined;
   }
   render() {
-    return (h("div", { class: "hy-collaboration" }, h("figure", { class: "hy-collaboration__logo", role: "complementary" }, h("img", { src: this.imageUrl, alt: this.imageAltText })), h("div", { class: "hy-collaboration__content" }, h("p", { class: "hy-collaboration__description" }, this.textDescription), this.linkUrl && (h("a", { href: this.linkUrl, class: "hy-collaboration__link" }, this.linkTitle, h("span", { "aria-hidden": "true" }, h("hy-icon", { icon: 'hy-icon-arrow-right', size: 10 })))))));
+    return (h("div", { class: "hy-collaboration" }, h("figure", { class: "hy-collaboration__logo", role: "complementary" }, h("img", { src: this.imageUrl, alt: this.imageAltText })), h("div", { class: "hy-collaboration__content" }, h("p", { class: "hy-collaboration__description" }, this.textDescription), this.linkUrl && (h("a", { href: this.linkUrl, class: "hy-collaboration__link" }, this.linkTitle, h("span", { "aria-hidden": "true" }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 10 })))))));
   }
   static get is() { return "hy-collaboration"; }
   static get originalStyleUrls() {

package/dist/collection/components/hy-crisis-banner/hy-crisis-banner.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class HyCrisisBanner {
   constructor() {
     this.bannerTitle = undefined;
@@ -7,7 +7,7 @@ export class HyCrisisBanner {
     this.linkUrl = undefined;
   }
   render() {
-    return (h(Host, { class: "hy-crisis-banner", role: "alert" }, h("div", { class: "hy-crisis-banner__container" }, h("div", { class: "hy-crisis-banner__indicator" }, h("hy-icon", { class: 'hy-crisis-banner__indicator-icon', icon: 'hy-icon-alert' })), h("div", { class: "hy-crisis-banner__content-wrapper" }, h("div", { class: "hy-crisis-banner__content" }, h("h3", { class: "hy-crisis-banner__title" }, this.bannerTitle), this.bannerDescription && (h("div", { class: "hy-crisis-banner__description", innerHTML: this.bannerDescription }))), this.linkUrl && (h("a", { class: "hy-crisis-banner__link", href: this.linkUrl }, this.linkTitle, h("hy-icon", { class: 'hy-crisis-banner__link-icon', icon: 'hy-icon-arrow-to-right' })))))));
+    return (h(Host, { class: "hy-crisis-banner", role: "alert" }, h("div", { class: "hy-crisis-banner__container" }, h("div", { class: "hy-crisis-banner__indicator" }, h("hy-icon", { class: "hy-crisis-banner__indicator-icon", icon: "hy-icon-alert" })), h("div", { class: "hy-crisis-banner__content-wrapper" }, h("div", { class: "hy-crisis-banner__content" }, h("h3", { class: "hy-crisis-banner__title" }, this.bannerTitle), this.bannerDescription && (h("div", { class: "hy-crisis-banner__description", innerHTML: this.bannerDescription }))), this.linkUrl && (h("a", { class: "hy-crisis-banner__link", href: this.linkUrl }, this.linkTitle, h("hy-icon", { class: "hy-crisis-banner__link-icon", icon: "hy-icon-arrow-to-right" })))))));
   }
   static get is() { return "hy-crisis-banner"; }
   static get originalStyleUrls() {

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

@@ -1,12 +1,12 @@
-import { Host, h } from '@stencil/core';
-import { jsonParserWorker } from '../../global/globalScript';
+import { Host, h } from "@stencil/core";
+import { jsonParserWorker } from "../../global/globalScript";
 export class HyDropdown {
   constructor() {
     this.single = false;
     this.dropdownLabel = null;
-    this.dropdownId = 'dropdownToggle';
+    this.dropdownId = "dropdownToggle";
     this.dropdownOptions = undefined;
-    this.defaultLabel = 'All';
+    this.defaultLabel = "All";
     this.defaultOption = null;
     this.isPanelOpen = false;
     this.isChecked = false;
@@ -16,7 +16,7 @@ export class HyDropdown {
     this._dropdownOptions = await jsonParserWorker(this.dropdownOptions);
   }
   componentWillUpdate() {
-    const items = this.el.querySelectorAll('.hy-dropdown__checkbox');
+    const items = this.el.querySelectorAll(".hy-dropdown__checkbox");
     if (items) {
       if ([...items].some((item) => item.checked == true)) {
         this.isChecked = true;
@@ -30,7 +30,7 @@ export class HyDropdown {
     if (!this.single)
       return;
     if (newValue !== oldValue) {
-      const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
+      const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
       Array.from(dropdownPanelCheckboxElements).filter((item) => {
         if (item.id == newValue) {
           item.checked = true;
@@ -46,9 +46,9 @@ export class HyDropdown {
   }
   handleClick(event) {
     const dropdownToggleButtonElement = this.el.querySelector(`#${this.dropdownId}`);
-    const dropdownPanelElement = this.el.querySelector('.hy-dropdown__panel');
-    const dropdownPanelCheckboxElements = this.el.querySelectorAll('.hy-dropdown__checkbox');
-    const dropdownToggleButtonIconElement = this.el.querySelector('.hy-dropdown__icon');
+    const dropdownPanelElement = this.el.querySelector(".hy-dropdown__panel");
+    const dropdownPanelCheckboxElements = this.el.querySelectorAll(".hy-dropdown__checkbox");
+    const dropdownToggleButtonIconElement = this.el.querySelector(".hy-dropdown__icon");
     const { target } = event;
     const allowedElements = [
       dropdownToggleButtonElement,
@@ -64,7 +64,7 @@ export class HyDropdown {
   handleSingleClick(event) {
     if (!this.single || !this.isPanelOpen)
       return;
-    const dropdownPanelCheckboxElements = this.el.getElementsByClassName('hy-dropdown__checkbox');
+    const dropdownPanelCheckboxElements = this.el.getElementsByClassName("hy-dropdown__checkbox");
     const allowedElements = [...dropdownPanelCheckboxElements];
     const { target } = event;
     if (!allowedElements.includes(target))
@@ -88,12 +88,12 @@ export class HyDropdown {
   }
   render() {
     const { label: currentLabel, id: currentId, value: currentValue } = this.currentSingle[0];
-    const classAttributes = ['hy-dropdown', this.single ? 'hy-dropdown--single' : ''].join(' ');
+    const classAttributes = ["hy-dropdown", this.single ? "hy-dropdown--single" : ""].join(" ");
     if (this.single) {
-      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, this.dropdownLabel && (h("label", { class: "hy-dropdown__button-label", htmlFor: this.dropdownId }, this.dropdownLabel)), h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? "Open" : "Close"} dropdown`, "data-current-id": currentId, "data-current-value": currentValue, value: currentId, type: "button" }, currentLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
     }
     else {
-      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? 'is-open' : ''}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? 'Open' : 'Close'} dropdown`, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: 'hy-icon-caret-down', size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? 'true' : 'false', "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
+      return (h(Host, { class: classAttributes }, h("button", { id: this.dropdownId, class: `hy-dropdown__toggle ${this.isPanelOpen ? "is-open" : ""}`, "aria-expanded": `${this.isPanelOpen || false}`, "aria-haspopup": "true", "aria-controls": "dropdownPanel", onClick: () => this.handlePanelToggle(), "aria-label": `${!this.isPanelOpen ? "Open" : "Close"} dropdown`, type: "button" }, this.dropdownLabel && this.dropdownLabel, h("hy-icon", { class: "hy-dropdown__icon", icon: "hy-icon-caret-down", size: 14, "aria-hidden": "true" })), h("hy-dropdown-panel", { "checkbox-checked": this.isChecked ? "true" : "false", "is-hidden": !this.isPanelOpen }, this._dropdownOptions.map(({ id, label, value }, index) => (h("hy-dropdown-panel-item", { "dropdown-item-id": id, "dropdown-item-label": label, "dropdown-item-value": value, "is-last": this._dropdownOptions.length - 1 === index }))))));
     }
   }
   static get is() { return "hy-dropdown"; }
@@ -161,7 +161,7 @@ export class HyDropdown {
         },
         "attribute": "dropdown-id",
         "reflect": false,
-        "defaultValue": "'dropdownToggle'"
+        "defaultValue": "\"dropdownToggle\""
       },
       "dropdownOptions": {
         "type": "string",
@@ -172,7 +172,7 @@ export class HyDropdown {
           "references": {
             "IDropdownItem": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/hy-dropdown/hy-dropdown.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/hy-dropdown/hy-dropdown.tsx"
             }
           }
         },
@@ -201,7 +201,7 @@ export class HyDropdown {
         },
         "attribute": "default-label",
         "reflect": false,
-        "defaultValue": "'All'"
+        "defaultValue": "\"All\""
       },
       "defaultOption": {
         "type": "any",