@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.45

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

@@ -1,29 +1,29 @@
-import { h } from '@stencil/core';
-import { AccordionVariants } from '../../utils/utils';
+import { h } from "@stencil/core";
+import { AccordionVariants } from "../../utils/utils";
 let keys = {
-  enter: 'Enter',
-  tab: 'Tab',
-  pageUp: 'PageUp',
-  pageDown: 'PageDown',
-  arrowUp: 'ArrowUp',
-  arrowDown: 'ArrowDown',
-  home: 'Home',
-  end: 'End', //35
+  enter: "Enter",
+  tab: "Tab",
+  pageUp: "PageUp",
+  pageDown: "PageDown",
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown",
+  home: "Home",
+  end: "End", //35
 };
 export class AccordionItem {
   constructor() {
     this.accordiontitle = undefined;
     this.variant = AccordionVariants.default;
-    this.headerstyle = 'common';
+    this.headerstyle = "common";
     this.showOpen = false;
     this.ready = false;
   }
   componentDidLoad() {
     this.ready = true;
-    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";
       }
     }
   }
@@ -31,16 +31,16 @@ export class AccordionItem {
     if (window.location.hash) {
       this.expandPanelByAnchor(window.location.hash);
     }
-    document.querySelectorAll('.hy-accordion__content').forEach(function (accordion) {
-      let showOpen = accordion.classList.contains('open');
+    document.querySelectorAll(".hy-accordion__content").forEach(function (accordion) {
+      let showOpen = accordion.classList.contains("open");
       let element = accordion;
       if (showOpen) {
-        element.style.display = 'block';
-        element.style.height = element.scrollHeight + 'px';
+        element.style.display = "block";
+        element.style.height = element.scrollHeight + "px";
       }
       else {
-        element.style.height = 0 + 'px';
-        element.style.display = 'none';
+        element.style.height = 0 + "px";
+        element.style.display = "none";
       }
     });
   }
@@ -52,11 +52,11 @@ export class AccordionItem {
   handleKeyDown(event) {
     const containerId = this.el.parentElement.id;
     let accordion = document.querySelectorAll(`#${containerId}`)[0];
-    const triggers = Array.prototype.slice.call(accordion.querySelectorAll('.hy-accordion__button'));
+    const triggers = Array.prototype.slice.call(accordion.querySelectorAll(".hy-accordion__button"));
     let target = event.target;
     const key = event.code;
     const ctrlModifier = event.ctrlKey && [keys.pageDown, keys.pageUp].includes(key); //key.match(/33|34/);
-    if (target.classList.contains('hy-accordion__button')) {
+    if (target.classList.contains("hy-accordion__button")) {
       // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations
       if ([keys.arrowDown, keys.arrowUp].includes(key) || ctrlModifier) {
         const index = triggers.indexOf(target);
@@ -84,46 +84,46 @@ export class AccordionItem {
   handleClick(event) {
     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.getElementsByClassName('hy-accordion__content')[0];
-      const isExpanded = target.getAttribute('aria-expanded') === 'true';
+    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.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');
+        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');
+        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+          targetParent.classList.remove("hy-accordion__item__is-open");
         }
         accordionContainer
-          .querySelector(`#${activeButtonElement.getAttribute('aria-controls')}`)
-          .setAttribute('aria-hidden', 'true');
+          .querySelector(`#${activeButtonElement.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "true");
         if (!allowToggle) {
-          activeButtonElement.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');
+        target.setAttribute("aria-expanded", "true");
+        targetParent.classList.add("hy-accordion__item__is-open");
         accordionContainer
-          .querySelector(`#${target.getAttribute('aria-controls')}`)
-          .setAttribute('aria-hidden', 'false');
+          .querySelector(`#${target.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "false");
         if (!allowToggle) {
-          target.setAttribute('aria-disabled', 'true');
+          target.setAttribute("aria-disabled", "true");
         }
       }
       else if (allowToggle && isExpanded) {
-        target.setAttribute('aria-expanded', 'false');
+        target.setAttribute("aria-expanded", "false");
         this.collapseSection(targetContent);
-        if (targetParent.classList.contains('hy-accordion__item__is-open')) {
-          targetParent.classList.remove('hy-accordion__item__is-open');
+        if (targetParent.classList.contains("hy-accordion__item__is-open")) {
+          targetParent.classList.remove("hy-accordion__item__is-open");
         }
         accordionContainer
-          .querySelector(`#${target.getAttribute('aria-controls')}`)
-          .setAttribute('aria-hidden', 'true');
+          .querySelector(`#${target.getAttribute("aria-controls")}`)
+          .setAttribute("aria-hidden", "true");
       }
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -134,73 +134,73 @@ export class AccordionItem {
       if (anchor.length > 0) {
         anchor = anchor.substr(1);
         let target = document.querySelectorAll(`[id=${anchor}]`)[0];
-        if (target && target.classList.contains('hy-accordion__button')) {
-          let targetParent = target.closest('.hy-accordion__item');
-          let targetContent = targetParent.querySelectorAll('.hy-accordion__content')[0];
+        if (target && target.classList.contains("hy-accordion__button")) {
+          let targetParent = target.closest(".hy-accordion__item");
+          let targetContent = targetParent.querySelectorAll(".hy-accordion__content")[0];
           this.expandSection(targetContent);
-          target.setAttribute('aria-expanded', 'true');
-          targetParent.classList.add('hy-accordion__item__is-open');
+          target.setAttribute("aria-expanded", "true");
+          targetParent.classList.add("hy-accordion__item__is-open");
           const targetElementRect = target.getBoundingClientRect();
-          window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: 'smooth' });
+          window.scrollTo({ top: window.scrollY + targetElementRect.top - 200, behavior: "smooth" });
           const containerId = targetParent.parentElement.parentElement.id;
           if (containerId.length > 0) {
             let accordion = document.querySelectorAll(`#${containerId}`)[0];
-            accordion.querySelector(`#${target.getAttribute('aria-controls')}`).setAttribute('aria-hidden', 'false');
+            accordion.querySelector(`#${target.getAttribute("aria-controls")}`).setAttribute("aria-hidden", "false");
           }
         }
       }
     }, 200);
   }
   collapseSection(element) {
-    element.style.height = 0 + 'px';
-    element.setAttribute('data-collapsed', 'true');
+    element.style.height = 0 + "px";
+    element.setAttribute("data-collapsed", "true");
     setTimeout(() => {
-      element.style.display = 'none';
+      element.style.display = "none";
     }, 250);
   }
   expandSection(element) {
-    element.style.display = 'block';
-    element.style.height = element.scrollHeight + 'px';
-    element.setAttribute('data-collapsed', 'false');
+    element.style.display = "block";
+    element.style.height = element.scrollHeight + "px";
+    element.setAttribute("data-collapsed", "false");
   }
   render() {
     const containerId = this.el.parentElement.id;
     if (this.ready && containerId.length > 0) {
       document.querySelectorAll(`#${containerId}`).forEach(function (accordion) {
         if (accordion) {
-          accordion.querySelectorAll('.hy-accordion__button').forEach(function (trigger) {
-            trigger.addEventListener('focus', function () {
-              trigger.classList.add('focus');
+          accordion.querySelectorAll(".hy-accordion__button").forEach(function (trigger) {
+            trigger.addEventListener("focus", function () {
+              trigger.classList.add("focus");
             });
-            trigger.addEventListener('blur', function () {
-              trigger.classList.remove('focus');
+            trigger.addEventListener("blur", function () {
+              trigger.classList.remove("focus");
             });
           });
         }
       });
     }
-    const classIsOpen = this.showOpen ? 'hy-accordion__item__is-open' : '';
-    const classContentIsOpen = this.showOpen ? 'open' : '';
-    const classAttributes = ['hy-accordion__item', this.variant, classIsOpen].join(' ');
-    const classInnerWrapper = ['hy-accordion__item--container', this.variant].join(' ');
-    const classHeadingAttributes = ['hy-accordion--heading', this.variant].join(' ');
+    const classIsOpen = this.showOpen ? "hy-accordion__item__is-open" : "";
+    const classContentIsOpen = this.showOpen ? "open" : "";
+    const classAttributes = ["hy-accordion__item", this.variant, classIsOpen].join(" ");
+    const classInnerWrapper = ["hy-accordion__item--container", this.variant].join(" ");
+    const classHeadingAttributes = ["hy-accordion--heading", this.variant].join(" ");
     const classContentAttributes = [
-      'hy-accordion__content',
+      "hy-accordion__content",
       `hy-accordion__content--${this.variant}`,
       this.variant,
       classContentIsOpen,
-    ].join(' ');
+    ].join(" ");
     const classContentInnerWrapper = [
-      'hy-accordion__content--inner-wrapper',
+      "hy-accordion__content--inner-wrapper",
       `hy-accordion__content--inner-wrapper--${this.headerstyle}`,
       `hy-accordion__content--inner-wrapper--${this.variant}`,
-    ].join(' ');
-    const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, '-');
-    const accordionItemHref = '#' + titleAsId + '--title';
-    const ariaExpanded = this.showOpen ? 'true' : 'false';
-    const ariaHidden = this.showOpen ? 'false' : 'true';
-    const dataCollapsed = this.showOpen ? 'false' : 'true';
-    return (h("div", { class: classAttributes }, h("div", { class: classInnerWrapper }, h("h3", { class: classHeadingAttributes }, h("a", { href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { class: "hy-accordion--heading__icon" }, h("hy-icon", { icon: 'hy-icon-caret-down', size: 16 })), h("span", null, this.accordiontitle)))), h("div", { "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: 'none' } }, h("div", { class: classContentInnerWrapper }, h("slot", null))))));
+    ].join(" ");
+    const titleAsId = this.accordiontitle.toLowerCase().replace(/\W/g, "-");
+    const accordionItemHref = "#" + titleAsId + "--title";
+    const ariaExpanded = this.showOpen ? "true" : "false";
+    const ariaHidden = this.showOpen ? "false" : "true";
+    const dataCollapsed = this.showOpen ? "false" : "true";
+    return (h("div", { class: classAttributes }, h("div", { class: classInnerWrapper }, h("h3", { class: classHeadingAttributes }, h("a", { href: accordionItemHref, class: "hy-accordion__link", tabindex: "-1" }, h("button", { "aria-expanded": ariaExpanded, "aria-controls": `${titleAsId}--content`, class: `hy-accordion__button hy-accordion__button--${this.headerstyle}`, id: `${titleAsId}--title` }, h("span", { class: "hy-accordion--heading__icon" }, h("hy-icon", { icon: "hy-icon-caret-down", size: 16 })), h("span", null, this.accordiontitle)))), h("div", { "aria-labelledBy": `${titleAsId}--title`, class: classContentAttributes, id: `${titleAsId}--content`, role: "region", "aria-hidden": ariaHidden, "data-collapsed": dataCollapsed, style: { display: "none" } }, h("div", { class: classContentInnerWrapper }, h("slot", null))))));
   }
   static get is() { return "hy-accordion-item"; }
   static get originalStyleUrls() {
@@ -271,7 +271,7 @@ export class AccordionItem {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'common'"
+        "defaultValue": "\"common\""
       },
       "showOpen": {
         "type": "boolean",

package/dist/collection/components/adjacent-image-text/adjacent-image-text.js

@@ -1,10 +1,10 @@
-import { h, Host } from '@stencil/core';
-import { jsonParserWorker } from '../../global/globalScript';
+import { h, Host } from "@stencil/core";
+import { jsonParserWorker } from "../../global/globalScript";
 export class AdjacentImageText {
   constructor() {
-    this.headerstyle = 'default';
+    this.headerstyle = "default";
     this.imageUrl = null;
-    this.imageAlt = '';
+    this.imageAlt = "";
     this.disableLazy = false;
     this.textTitle = undefined;
     this.textDescription = null;
@@ -22,27 +22,27 @@ export class AdjacentImageText {
     this._sourceSet = await jsonParserWorker(this.sourceSet);
   }
   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 classAttributes = ['hy-adjacent-image-text', `hy-adjacent-image-text__${this.headerstyle}`].join(' ');
+    const classAttributes = ["hy-adjacent-image-text", `hy-adjacent-image-text__${this.headerstyle}`].join(" ");
     const contentClassAttributes = [
-      'hy-adjacent-image-text__text-container',
-      'hy-adjacent-image-text__text-container--left',
-    ].join(' ');
-    const imageLeftClassAttributes = ['hy-adjacent-image-text__image-container'].join(' ');
+      "hy-adjacent-image-text__text-container",
+      "hy-adjacent-image-text__text-container--left",
+    ].join(" ");
+    const imageLeftClassAttributes = ["hy-adjacent-image-text__image-container"].join(" ");
     const aspectRatioWidth = 6;
     const aspectRatioHeight = 4;
     const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
     const aspectRatio = {
-      '--aspectRatio': `${aspect}%`,
+      "--aspectRatio": `${aspect}%`,
     };
-    return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: imageLeftClassAttributes, style: aspectRatio }, 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.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? 'eager' : 'lazy', alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))), h("div", { class: contentClassAttributes }, h("div", { class: "hy-adjacent-image-text__text-container__info-wrapper" }, h("div", { class: "hy-adjacent-image-text__text-container__title" }, this.textTitle), h("p", { class: `hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}` }, this.textDescription)), h("div", { class: "hy-adjacent-image-text__text-container__links-wrapper" }, this.mainUrl && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle, "sc-label": this.mainUrlAriaLabel, url: this.mainUrl, "is-external": this.mainUrlIsExternal }))), this.mainUrl2 && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle2, "sc-label": this.mainUrlAriaLabel2, url: this.mainUrl2, "is-external": this.mainUrlIsExternal2 })))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+    return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: imageLeftClassAttributes, style: aspectRatio }, 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.imageAlt, class: "hy-image__image", src: this.imageUrl }))) : (h("img", { loading: this.disableLazy ? "eager" : "lazy", alt: this.imageAlt, class: "hy-image__image", src: this.imageUrl }))), h("div", { class: contentClassAttributes }, h("div", { class: "hy-adjacent-image-text__text-container__info-wrapper" }, h("div", { class: "hy-adjacent-image-text__text-container__title" }, this.textTitle), h("p", { class: `hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}` }, this.textDescription)), h("div", { class: "hy-adjacent-image-text__text-container__links-wrapper" }, this.mainUrl && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle, "sc-label": this.mainUrlAriaLabel, url: this.mainUrl, "is-external": this.mainUrlIsExternal }))), this.mainUrl2 && (h("div", { class: "hy-adjacent-image-text__text-container__link" }, h("hy-cta-link", { "link-content": this.mainUrlTitle2, "sc-label": this.mainUrlAriaLabel2, url: this.mainUrl2, "is-external": this.mainUrlIsExternal2 })))))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
   }
   static get is() { return "hy-adjacent-image-text"; }
   static get originalStyleUrls() {
@@ -73,7 +73,7 @@ export class AdjacentImageText {
         },
         "attribute": "headerstyle",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       },
       "imageUrl": {
         "type": "string",
@@ -109,7 +109,7 @@ export class AdjacentImageText {
         },
         "attribute": "image-alt",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "disableLazy": {
         "type": "boolean",
@@ -311,7 +311,7 @@ export class AdjacentImageText {
           "references": {
             "ImageSrcSet": {
               "location": "local",
-              "path": "/builds/julkiset-sivut/design-system-lib/src/components/adjacent-image-text/adjacent-image-text.tsx"
+              "path": "/Users/tuukkaturu/hy/hy-ds/design-system-lib/core/src/components/adjacent-image-text/adjacent-image-text.tsx"
             }
           }
         },

package/dist/collection/components/baseline/baseline.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { css } from 'emotion';
+import { h } from "@stencil/core";
+import { css } from "emotion";
 const createCss = (value) => {
   return css `
     > * + * {

package/dist/collection/components/button/button.js

@@ -1,46 +1,46 @@
-import { h, Host } from '@stencil/core';
-import colors from '../../global/colors';
+import { h, Host } from "@stencil/core";
+import colors from "../../global/colors";
 const fillcolors = {
   primary: colors.brandMain,
-  secondary: 'white',
+  secondary: "white",
 };
 export class Button {
   constructor() {
-    this.buttonType = 'submit';
-    this.buttonClasses = '';
-    this.variant = 'primary';
-    this.state = 'enabled';
-    this.size = 'normal';
+    this.buttonType = "submit";
+    this.buttonClasses = "";
+    this.variant = "primary";
+    this.state = "enabled";
+    this.size = "normal";
     this.disabled = false;
-    this.url = '';
-    this.ariaLabel = '';
+    this.url = "";
+    this.ariaLabel = "";
     this.isExternal = false;
     this.icon = undefined;
     this.iconRight = undefined;
-    this.attrs = '';
+    this.attrs = "";
   }
   render() {
-    const classAttributes = ['hy-button', this.variant, this.state, 'size-' + this.size, this.buttonClasses];
+    const classAttributes = ["hy-button", this.variant, this.state, "size-" + this.size, this.buttonClasses];
     const iconFillColor = fillcolors[this.variant];
-    const target = this.isExternal ? '_blank' : '_self';
+    const target = this.isExternal ? "_blank" : "_self";
     let props = {};
     if (this.attrs && this.attrs.length > 2) {
       let attrString = JSON.parse(this.attrs);
       let attrArray = attrString.split('" ');
       attrArray.map((item) => {
-        let parts = item.split('=');
+        let parts = item.split("=");
         let key = parts[0];
         let value = parts[1];
-        key = key.replaceAll('"', ' ');
+        key = key.replaceAll('"', " ");
         key = key.trim();
-        if (key !== 'class') {
-          value = value.replaceAll('"', ' ');
+        if (key !== "class") {
+          value = value.replaceAll('"', " ");
           value = value.trim();
           props[key] = value;
         }
       });
     }
-    return this.url ? (h(Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel }, h("div", { style: { display: 'flex' } }, h("a", { class: classAttributes.join(' '), href: this.url, target: target }, h("span", { class: "hy-button__text" }, h("slot", null)), h("span", { class: "hy-button__icon" }, h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (h(Host, { "aria-label": this.ariaLabel }, h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(' '), disabled: this.disabled }, props), !!this.icon && (h("span", { class: "hy-button__icon hy-button__icon--left" }, h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))), h("span", { class: "hy-button__text" }, h("slot", null)), !!this.iconRight && (h("span", { class: "hy-button__icon hy-button__icon--right" }, h("hy-icon", { icon: this.iconRight, fill: iconFillColor, size: 13 }))))));
+    return this.url ? (h(Host, { "icon-right": "hy-icon-arrow-right", "aria-label": this.ariaLabel }, h("div", { style: { display: "flex" } }, h("a", { class: classAttributes.join(" "), href: this.url, target: target }, h("span", { class: "hy-button__text" }, h("slot", null)), h("span", { class: "hy-button__icon" }, h("hy-icon", { icon: "hy-icon-arrow-right", fill: iconFillColor, size: 13 })))))) : (h(Host, { "aria-label": this.ariaLabel }, h("button", Object.assign({ type: this.buttonType, class: classAttributes.join(" "), disabled: this.disabled }, props), !!this.icon && (h("span", { class: "hy-button__icon hy-button__icon--left" }, h("hy-icon", { icon: this.icon, fill: iconFillColor, size: 13 }))), h("span", { class: "hy-button__text" }, h("slot", null)), !!this.iconRight && (h("span", { class: "hy-button__icon hy-button__icon--right" }, h("hy-icon", { icon: this.iconRight, fill: iconFillColor, size: 13 }))))));
   }
   static get is() { return "hy-button"; }
   static get originalStyleUrls() {
@@ -71,7 +71,7 @@ export class Button {
         },
         "attribute": "button-type",
         "reflect": false,
-        "defaultValue": "'submit'"
+        "defaultValue": "\"submit\""
       },
       "buttonClasses": {
         "type": "string",
@@ -89,7 +89,7 @@ export class Button {
         },
         "attribute": "button-classes",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "variant": {
         "type": "string",
@@ -112,13 +112,13 @@ export class Button {
         },
         "attribute": "variant",
         "reflect": false,
-        "defaultValue": "'primary'"
+        "defaultValue": "\"primary\""
       },
       "state": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'enabled' | 'disabled'",
+          "original": "\"enabled\" | \"disabled\"",
           "resolved": "\"disabled\" | \"enabled\"",
           "references": {}
         },
@@ -130,13 +130,13 @@ export class Button {
         },
         "attribute": "state",
         "reflect": false,
-        "defaultValue": "'enabled'"
+        "defaultValue": "\"enabled\""
       },
       "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'normal' | 'large'",
+          "original": "\"normal\" | \"large\"",
           "resolved": "\"large\" | \"normal\"",
           "references": {}
         },
@@ -148,7 +148,7 @@ export class Button {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'normal'"
+        "defaultValue": "\"normal\""
       },
       "disabled": {
         "type": "boolean",
@@ -184,7 +184,7 @@ export class Button {
         },
         "attribute": "url",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "ariaLabel": {
         "type": "string",
@@ -202,7 +202,7 @@ export class Button {
         },
         "attribute": "aria-label",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       },
       "isExternal": {
         "type": "boolean",
@@ -272,7 +272,7 @@ export class Button {
         },
         "attribute": "attrs",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "\"\""
       }
     };
   }

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

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class ColorBox {
   render() {
     return (h(Host, null, h("slot", null)));