@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.44

package/components/hy-tabs2.js

@@ -0,0 +1,346 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './hy-box2.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const hyTabsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tabs__container .hy-tablist-container{border-bottom:1px solid var(--grayscale-tabs-border);position:relative}.hy-tabs__container .hy-tab-scroll{background-color:rgba(255, 255, 255, 0.8);border:0;height:100%;margin:0;padding:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:4}.hy-tabs__container .hy-tab-scroll.is-hidden{display:none;visibility:hidden}.hy-tabs__container .hy-tab-scroll.is-disabled{background-color:var(--grayscale-medium)}.hy-tabs__container .hy-tab-scroll.is-disabled:hover{cursor:none}.hy-tabs__container .hy-tab-scroll:focus,.hy-tabs__container .hy-tab-scroll:hover{outline:none;cursor:pointer}.hy-tabs__container .hy-tab-scroll span{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-black);border-radius:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px}.hy-tabs__container .hy-tab-scroll span svg{fill:var(--grayscale-white);height:16px;width:16px}.hy-tabs__container .hy-tab-scroll__left{left:0;padding-right:8px}.hy-tabs__container .hy-tab-scroll__left svg{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.hy-tabs__container .hy-tab-scroll__right{padding-left:8px;right:0}.hy-tabs__container .hy-tab-scroll__right svg{-webkit-transform:translateX(1px);transform:translateX(1px)}.hy-tabs__container [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 0 -0.1em;overflow:scroll;position:relative;scrollbar-width:none;white-space:nowrap}.hy-tabs__container [role=tablist]::-webkit-scrollbar{display:none}.hy-tabs__container [role=tablist] a{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:47.56%;text-decoration:none;-ms-flex-negative:0;flex-shrink:0}.hy-tabs__container [role=tablist] a:not(:first-of-type){margin-left:6px}@media (min-width: 30rem){.hy-tabs__container [role=tablist] a{max-width:35.37%}}@media (min-width: 60rem){.hy-tabs__container [role=tablist] a{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tablist] a{max-width:23.03%}}.hy-tabs__container [role=tab]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:6px;padding:0}.hy-tabs__container [role=tab]>span{font-size:0.875rem;line-height:14px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border:0;color:var(--link-blue);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;letter-spacing:-0.5px;padding:8px 8px 7px;pointer-events:none;position:relative;text-align:left;white-space:normal;word-break:break-word;overflow-wrap:break-word;overflow-wrap:break-word}@media (min-width: 30rem){.hy-tabs__container [role=tab]>span{font-size:1rem;line-height:18px;padding:16px 12px 10px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab]>span{font-size:1.125rem;line-height:20px;letter-spacing:-0.6px;padding:16px 16px 14px}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab].large{margin:0 12px 0 0}}.hy-tabs__container [role=tab][aria-selected=true]{border-bottom-width:0;border:1px solid var(--grayscale-dark);margin-bottom:0;z-index:3}.hy-tabs__container [role=tab][aria-selected=true]>span{background-color:var(--grayscale-white);color:var(--grayscale-black);padding-bottom:13px}@media (min-width: 30rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:16px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:20px}}.hy-tabs__container [role=tab][aria-selected=true]>span:before{background-color:var(--grayscale-white);bottom:0;content:\"\";height:4px;left:0;position:absolute;right:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.hy-tabs__container [role=tab][aria-selected=true]>span:after{background-color:var(--grayscale-black);bottom:0;content:\"\";height:4px;left:8px;position:absolute;right:8px}.hy-tabs__container [role=tab]:hover{border-radius:0;color:inherit;cursor:pointer;text-decoration:none}.hy-tabs__container [role=tab]:hover span{background-color:var(--hover-gray);color:var(--brand-main-active)}.hy-tabs__container [role=tabpanel]{border:1px solid var(--grayscale-dark);padding:28px 12px;position:relative;z-index:2}@media (min-width: 30rem){.hy-tabs__container [role=tabpanel]{padding:38px 15px}}@media (min-width: 60rem){.hy-tabs__container [role=tabpanel]{padding:40px 20px}}.hy-tabs__container [role=tabpanel]:focus{outline:1px solid var(--brand-main-active)}";
+
+// For easy reference
+let keys = {
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  delete: 46,
+};
+// Add or substract depending on key pressed
+let direction = {
+  37: -1,
+  38: -1,
+  39: 1,
+  40: 1,
+};
+let checkTimeout;
+let focusTimeout;
+let scrollTimeout;
+const HyTabs = /*@__PURE__*/ proxyCustomElement(class HyTabs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tabId = undefined;
+    this.tabListLabel = "";
+    this.focusTimeoutCleared = true;
+    this.tabButtonTitles = undefined;
+    this.tabPanelsState = undefined;
+    this.tabButtons = undefined;
+    this.tabList = undefined;
+    this.headerstyle = "common";
+  }
+  componentWillLoad() {
+    const tabItems = this.el.querySelectorAll("hy-tabs-item");
+    if (tabItems) {
+      this.tabButtonTitles = Array.from(tabItems).map((panel) => {
+        return {
+          title: panel.getAttribute("tab-title"),
+          id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
+        };
+      });
+    }
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+    const tabContainer = this.el.querySelector(".hy-tabs__container");
+    if (tabContainer) {
+      this.generateArrays(tabContainer);
+      const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+      const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+      const tabList = this.tabList;
+      this.checkScrollHidden(tabList, leftButton, rightButton);
+      tabList.addEventListener("scroll", () => {
+        scrollTimeout = setTimeout(() => {
+          window.clearTimeout(scrollTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+        }, 250);
+      }, false);
+      if (tabList.offSetWidth <= document.body.scrollWidth) {
+        leftButton.classList.add("is-hidden");
+        rightButton.classList.add("is-hidden");
+      }
+      const oneTabWidth = 250;
+      rightButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        rightButton.classList.add("is-disabled");
+        tabList.scrollBy({
+          top: 0,
+          left: +oneTabWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          rightButton.classList.remove("is-disabled");
+        }, 250);
+      });
+      leftButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        leftButton.classList.add("is-disabled");
+        tabList.scrollBy({
+          top: 0,
+          left: -oneTabWidth,
+          behavior: "smooth",
+        });
+        checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
+          this.checkScrollHidden(tabList, leftButton, rightButton);
+          leftButton.classList.remove("is-disabled");
+        }, 250);
+      });
+    }
+  }
+  generateArrays(tc) {
+    this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
+    this.tabButtons = tc.querySelectorAll('[role="tab"]');
+    this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
+    if (this.tabButtons.length > 0) {
+      this.addListeners(this.tabButtons, 1);
+      this.activateTab(this.tabButtons[0], true);
+    }
+  }
+  addListeners(tabs, index) {
+    if (tabs.length > 1) {
+      for (let i = 0; i < tabs.length; ++i) {
+        tabs[index].addEventListener("click", this.clickEventListener);
+        tabs[index].addEventListener("keydown", this.keydownEventListener);
+        //tabs[index].addEventListener('keyup', this.keyupEventListener);
+        tabs[index].index = index;
+      }
+    }
+  }
+  checkScrollHidden(tablist, leftButton, rightButton) {
+    if (tablist.scrollLeft === 0) {
+      leftButton.classList.add("is-hidden");
+    }
+    else {
+      leftButton.classList.remove("is-hidden");
+    }
+    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
+      rightButton.classList.add("is-hidden");
+    }
+    else {
+      rightButton.classList.remove("is-hidden");
+    }
+  }
+  // When a tab is clicked, activateTab is fired to activate it
+  clickEventListener(event) {
+    if (event) {
+      const target = event.target;
+      const tabs = this.tabButtonTitles;
+      if (tabs) {
+        tabs.forEach((tab) => {
+          const id = Object.values(tab)[1];
+          if (id === target.id) {
+            this.activateTab(target, true);
+          }
+        });
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+    }
+  }
+  keydownEventListener(event) {
+    const key = event.keyCode;
+    const tabs = this.tabButtonTitles;
+    switch (key) {
+      case keys.end:
+        event.preventDefault();
+        // Activate last tab
+        this.activateTab(tabs[tabs.length - 1], true);
+        break;
+      case keys.home:
+        event.preventDefault();
+        // Activate first tab
+        this.activateTab(tabs[0], true);
+        break;
+      // Up and down are in keydown
+      // because we need to prevent page scroll >:)
+      case keys.up:
+      case keys.down:
+        if (this.focusTimeoutCleared) {
+          this.determineOrientation(event);
+        }
+        break;
+    }
+  }
+  keyupEventListener(event) {
+    const key = event.keyCode;
+    switch (key) {
+      case keys.left:
+      case keys.right:
+        if (event.target.role === "tab") {
+          event.preventDefault();
+          if (this.focusTimeoutCleared) {
+            this.determineOrientation(event);
+          }
+        }
+        break;
+    }
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+  }
+  determineOrientation(event) {
+    const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+    const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+    const tabList = this.tabList;
+    this.checkScrollHidden(tabList, leftButton, rightButton);
+    const key = event.keyCode;
+    const vertical = tabList.getAttribute("aria-orientation") == "vertical";
+    let proceed = false;
+    if (vertical) {
+      if (key === keys.up || key === keys.down) {
+        event.preventDefault();
+        proceed = true;
+      }
+    }
+    else {
+      if (key === keys.left || key === keys.right) {
+        proceed = true;
+      }
+    }
+    if (proceed) {
+      this.switchTabOnArrowPress(event);
+    }
+  }
+  switchTabOnArrowPress(event) {
+    const pressed = event.keyCode;
+    if (direction[pressed]) {
+      const target = event.target;
+      const tabs = this.tabButtons;
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === target.id) {
+          if (i > 0) {
+            if (direction[pressed] === -1) {
+              tabs[i - 1].focus();
+              this.focusEventHandler(tabs[i - 1]);
+              break;
+            }
+          }
+          if (i < tabs.length - 1) {
+            if (direction[pressed] === 1) {
+              tabs[i + 1].focus();
+              this.focusEventHandler(tabs[i + 1]);
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+  // Activates any given tab panel
+  activateTab(tab, setFocus) {
+    setFocus = setFocus || true;
+    // Deactivate all other tabs
+    this.deactivateTabs(this.tabButtons);
+    // Remove tabindex attribute
+    tab.removeAttribute("tabindex");
+    tab.setAttribute("aria-selected", "true");
+    const controls = tab.getAttribute("aria-controls");
+    this.el.querySelector(`#${controls}`).removeAttribute("hidden");
+    if (setFocus) {
+      tab.focus();
+    }
+  }
+  // Deactivate all tabs and tab panels
+  deactivateTabs(tabs) {
+    for (let t = 0; t < tabs.length; t++) {
+      tabs[t].setAttribute("tabindex", "-1");
+      tabs[t].setAttribute("aria-selected", "false");
+      tabs[t].removeEventListener("focus", this.focusEventHandler);
+    }
+    const panels = this.tabPanelsState[0];
+    for (let p = 0; p < panels.length; p++) {
+      panels[p].setAttribute("hidden", "hidden");
+    }
+  }
+  focusEventHandler(tab) {
+    const target = tab;
+    this.focusTimeoutCleared = false;
+    focusTimeout = window.setTimeout(() => {
+      window.clearTimeout(focusTimeout);
+      this.focusTimeoutCleared = true;
+      const focused = document.activeElement;
+      if (target === focused) {
+        this.activateTab(target, false);
+      }
+    }, 250);
+  }
+  render() {
+    const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
+    const id = this.tabId.toLowerCase().replace(/\W/g, "-");
+    if (window.location.hash) {
+      const tabHash = window.location.hash.substring(1);
+      const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
+      if (isUrlHashed) {
+        const hashElement = document.getElementById(tabHash);
+        if (hashElement) {
+          this.activateTab(hashElement, true);
+          const hashElementRect = hashElement.getBoundingClientRect();
+          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
+        }
+      }
+    }
+    return [
+      h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
+      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+        this.tabButtonTitles.map((item) => {
+          const title = Object.values(item)[0];
+          const id = title.toLowerCase().replace(/\W/g, "-");
+          const titleAsId = title.toLowerCase().replace(/\W/g, "-");
+          const tabItemHref = "#" + titleAsId;
+          return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
+        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), h("slot", null)),
+      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
+    ];
+  }
+  get el() { return this; }
+  static get style() { return hyTabsCss; }
+}, [4, "hy-tabs", {
+    "tabId": [1, "tab-id"],
+    "tabListLabel": [1, "tab-list-label"],
+    "headerstyle": [1],
+    "focusTimeoutCleared": [32],
+    "tabButtonTitles": [32],
+    "tabPanelsState": [32],
+    "tabButtons": [32],
+    "tabList": [32]
+  }, [[0, "click", "clickEventListener"], [0, "keydown", "keydownEventListener"], [0, "keydown", "keyupEventListener"], [0, "focus", "focusEventHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-tabs", "hy-box", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTabs);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { HyTabs as H, defineCustomElement as d };

package/components/hy-tag.d.ts

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

package/components/hy-tag.js

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

package/components/hy-tag2.js

@@ -0,0 +1,31 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const hyTagCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tag{margin:0 4px 4px 0}.hy-tag span{font-size:0.75rem;line-height:16px;font-weight:700;background-color:var(--grayscale-dark);color:var(--grayscale-white);font-family:var(--main-font-family);letter-spacing:-0.07px;padding:4px 8px;text-transform:uppercase}";
+
+const HyTag = /*@__PURE__*/ proxyCustomElement(class HyTag extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classAttributes = ["hy-tag"].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, h("span", null, h("slot", null)))));
+  }
+  static get style() { return hyTagCss; }
+}, [1, "hy-tag"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-tag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTag);
+      }
+      break;
+  } });
+}
+
+export { HyTag as H, defineCustomElement as d };

package/components/hy-tiny-text.d.ts

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

package/components/hy-tiny-text.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const tinyTextCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tiny-text{color:var(--grayscale-dark);font-family:var(--main-font-family);font-size:12px;letter-spacing:-0.07px;line-height:16px}";
+
+const TinyText = /*@__PURE__*/ proxyCustomElement(class TinyText extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classAttributes = ["hy-tiny-text"];
+    return (h("div", { class: classAttributes.join(" ") }, h("slot", null)));
+  }
+  static get style() { return tinyTextCss; }
+}, [1, "hy-tiny-text"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-tiny-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-tiny-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TinyText);
+      }
+      break;
+  } });
+}
+
+const HyTinyText = TinyText;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTinyText, defineCustomElement };

package/components/hy-twitter-feed.d.ts

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

package/components/hy-twitter-feed.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyTwitterFeedCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}.hy-twitter-feed{margin:40px 0}.hy-twitter-feed__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:24px}@media (min-width: 30rem){.hy-twitter-feed__header{margin-bottom:32px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__header{margin-bottom:41px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__header{margin-bottom:41px}}.hy-twitter-feed__title{font-weight:700;font-family:var(--main-font-family);margin-top:0;margin-bottom:0;margin-right:8px}@media (min-width: 30rem){.hy-twitter-feed__title{margin-right:12px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__title{margin-right:16px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__title{margin-right:16px}}h2.hy-twitter-feed__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.82px}@media (min-width: 30rem){h2.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.is-front-page h2.hy-twitter-feed__title,.is-landing-page h2.hy-twitter-feed__title{font-size:1.75rem;line-height:32px;letter-spacing:-0.7px;text-transform:uppercase}@media (min-width: 30rem){.is-front-page h2.hy-twitter-feed__title,.is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.85px}}@media (min-width: 60rem){.without-sidebar .is-front-page h2.hy-twitter-feed__title,.without-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h2.hy-twitter-feed__title,.without-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}@media (min-width: 75.0625rem){.with-sidebar .is-front-page h2.hy-twitter-feed__title,.with-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 1601px){.with-sidebar .is-front-page h2.hy-twitter-feed__title,.with-sidebar .is-landing-page h2.hy-twitter-feed__title{font-size:2.625rem;line-height:48px;letter-spacing:-1.05px}}h3.hy-twitter-feed__title{font-size:1.3125rem;line-height:28px;letter-spacing:-0.42px}@media (min-width: 30rem){h3.hy-twitter-feed__title{font-size:1.5625rem;line-height:32px;letter-spacing:-0.5px}}.is-front-page h3.hy-twitter-feed__title,.is-landing-page h3.hy-twitter-feed__title{font-size:1.625rem;line-height:32px;letter-spacing:-0.52px}@media (min-width: 30rem){.is-front-page h3.hy-twitter-feed__title,.is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 60rem){.without-sidebar .is-front-page h3.hy-twitter-feed__title,.without-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 75.0625rem){.without-sidebar .is-front-page h3.hy-twitter-feed__title,.without-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}@media (min-width: 75.0625rem){.with-sidebar .is-front-page h3.hy-twitter-feed__title,.with-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:1.875rem;line-height:36px;letter-spacing:-0.6px}}@media (min-width: 1601px){.with-sidebar .is-front-page h3.hy-twitter-feed__title,.with-sidebar .is-landing-page h3.hy-twitter-feed__title{font-size:2.125rem;line-height:40px;letter-spacing:-0.68px}}.hy-twitter-feed__keyword{font-size:0.9375rem;line-height:22px;margin:0;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-twitter-feed__keyword hy-icon{margin-right:4px}@media (min-width: 30rem){.hy-twitter-feed__keyword hy-icon{margin-right:6px}}@media (min-width: 30rem){.hy-twitter-feed__keyword hy-icon svg{width:24px;height:24px}}@media (min-width: 30rem){.hy-twitter-feed__keyword{font-size:1rem;line-height:24px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword{font-size:1.0625rem;line-height:24px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword hy-icon svg{width:32px;height:32px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword{font-size:1.0625rem;line-height:24px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword hy-icon svg{width:32px;height:32px}}.hy-twitter-feed__keyword+a{font-size:0.9375rem;line-height:18px;margin:0 0 0 8px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.28px;text-decoration:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.hy-twitter-feed__keyword+a:hover{text-decoration:underline}.hy-twitter-feed__keyword+a hy-icon{margin-right:6px}.hy-twitter-feed__keyword+a hy-icon svg{fill:var(--link-blue)}@media (min-width: 30rem){.hy-twitter-feed__keyword+a{font-size:0.875rem;line-height:18px;letter-spacing:-0.26px;margin:0 0 0 12px}}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-feed__keyword+a{font-size:1rem;line-height:20px;letter-spacing:-0.3px;margin:0 0 0 16px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-feed__keyword+a{font-size:1rem;line-height:20px;letter-spacing:-0.3px;margin:0 0 0 16px}}.hy-twitter-feed__tweets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:16px}@media (min-width: 30rem){.hy-twitter-feed__tweets{grid-template-columns:repeat(2, 1fr);gap:24px}}@media (min-width: 60rem){.without-sidebar .hy-twitter-feed__tweets{grid-template-columns:repeat(3, 1fr)}}@media (min-width: 75.0625rem){.with-sidebar .hy-twitter-feed__tweets{grid-template-columns:repeat(3, 1fr)}}.hy-twitter-tweet{background-color:var(--grayscale-background-box);height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}.hy-twitter-tweet__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:-8px;padding-top:12px;margin-bottom:8px}@media (min-width: 30rem){.hy-twitter-tweet__header{padding-top:16px}}.hy-twitter-tweet__profile-image img{height:70px;width:70px}@media (min-width: 75.0625rem){.without-sidebar .hy-twitter-tweet__profile-image img{height:80px;width:80px}}@media (min-width: 1601px){.with-sidebar .hy-twitter-tweet__profile-image img{height:80px;width:80px}}.hy-twitter-tweet__header-content{margin-left:8px}.hy-twitter-tweet__header-content time{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-black);letter-spacing:-0.1px}.hy-twitter-tweet__header-content p{font-size:0.9375rem;line-height:18px;font-weight:700;font-family:var(--main-font-family);color:var(--brand-main-nearly-black);letter-spacing:-0.3px;margin:4px 0 2px}@media (min-width: 30rem){.hy-twitter-tweet__header-content p{font-size:1rem;line-height:20px;letter-spacing:-0.32px}}.hy-twitter-tweet__header-content a{font-size:0.75rem;line-height:16px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.1px;text-decoration:none;position:relative;z-index:10}.hy-twitter-tweet__header-content a:hover{text-decoration:underline}.hy-twitter-tweet__content-wrapper{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hy-twitter-tweet__content{padding:0 16px}.hy-twitter-tweet__content p{font-size:0.9375rem;line-height:20px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark-text);letter-spacing:-0.03px;margin:0 0 8px}@media (min-width: 30rem){.hy-twitter-tweet__content p{font-size:0.875rem;line-height:18px;letter-spacing:-0.08px}}.hy-twitter-tweet__tweet-link{font-size:0.75rem;line-height:16px;font-weight:600;font-family:var(--main-font-family);color:var(--link-blue);letter-spacing:-0.1px;text-decoration:none}.hy-twitter-tweet__tweet-link span{position:absolute;inset:0}.hy-twitter-tweet__tweet-link:hover{text-decoration:underline}.hy-twitter-tweet__statistics{margin-top:16px;padding:0 16px 16px}.hy-twitter-tweet__statistics .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.hy-twitter-tweet__statistics p{font-size:0.75rem;line-height:14px;font-weight:400;font-family:var(--main-font-family);color:var(--grayscale-dark);letter-spacing:-0.1px;margin:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hy-twitter-tweet__statistics p:not(:first-of-type){margin-left:16px}.hy-twitter-tweet__statistics p hy-icon{margin-right:4px}.hy-twitter-tweet__statistics p hy-icon svg{fill:var(--grayscale-dark)}";
+
+const HyTwitterFeed$1 = /*@__PURE__*/ proxyCustomElement(class HyTwitterFeed extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headingVariant = undefined;
+    this.paragraphTitle = undefined;
+    this.twitterFeedKeyword = undefined;
+    this.tweetType = undefined;
+    this.tweets = undefined;
+  }
+  render() {
+    const parsedTweets = JSON.parse(this.tweets);
+    const HeadingVariant = this.headingVariant.toLowerCase();
+    if (this.tweetType === "Hashtag" && this.twitterFeedKeyword.charAt(0) === "#") {
+      this.twitterFeedKeyword = this.twitterFeedKeyword.substring(1);
+    }
+    return (h("section", { class: "hy-twitter-feed" }, h("div", { class: "hy-twitter-feed__header" }, h(HeadingVariant, { class: "hy-twitter-feed__title" }, this.paragraphTitle || "Twitter"), h("p", { class: "hy-twitter-feed__keyword" }, h("hy-icon", { icon: `hy-icon-some-twitter`, size: 20 }), this.tweetType === "Hashtag" ? `#${this.twitterFeedKeyword}` : `@${this.twitterFeedKeyword}`), this.tweetType === "Username" && (h("a", { href: `https://twitter.com/${this.twitterFeedKeyword}`, target: "_blank" }, h("hy-icon", { icon: `hy-icon-plus`, size: 12 }), "Follow"))), h("ul", { class: "hy-twitter-feed__tweets" }, parsedTweets.map(({ tweet_text, tweet_created, tweet_absolute_url, tweet_like_count, tweet_retweet_count, user_name, user_username, user_profile_image_url, }) => {
+      const dateFormatted = new Intl.DateTimeFormat("fi-FI").format(new Date(tweet_created));
+      return (h("li", { class: "hy-twitter-feed__item" }, h("article", { class: "hy-twitter-tweet" }, h("header", { class: "hy-twitter-tweet__header" }, h("figure", { class: "hy-twitter-tweet__profile-image", role: "complementary" }, h("img", { src: user_profile_image_url, alt: "" })), h("div", { class: "hy-twitter-tweet__header-content" }, h("time", { dateTime: tweet_created }, dateFormatted), h("p", null, user_name), h("a", { class: "hy-twitter-tweet__user-link", href: `https://twitter.com/${user_username}`, target: "_blank" }, "@", user_username))), h("div", { class: "hy-twitter-tweet__content-wrapper" }, h("div", { class: "hy-twitter-tweet__content" }, h("p", null, tweet_text.length > 113 ? `${tweet_text.substr(0, 113)}...` : tweet_text), h("a", { class: "hy-twitter-tweet__tweet-link", href: tweet_absolute_url, target: "_blank" }, h("span", { "aria-hidden": "true" }), `${tweet_absolute_url.substr(0, 24)}...`)), h("div", { class: "hy-twitter-tweet__statistics", role: "complementary" }, h("p", null, h("span", { class: "visually-hidden" }, "Tweet like count: "), h("hy-icon", { icon: `hy-icon-some-twitter-like`, size: 16 }), tweet_like_count), h("p", null, h("span", { class: "visually-hidden" }, "Tweet retweet count: "), h("hy-icon", { icon: `hy-icon-some-twitter-retweet`, size: 16 }), tweet_retweet_count))))));
+    }))));
+  }
+  static get style() { return hyTwitterFeedCss; }
+}, [0, "hy-twitter-feed", {
+    "headingVariant": [1, "heading-variant"],
+    "paragraphTitle": [1, "paragraph-title"],
+    "twitterFeedKeyword": [1, "twitter-feed-keyword"],
+    "tweetType": [1, "tweet-type"],
+    "tweets": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-twitter-feed", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-twitter-feed":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTwitterFeed$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyTwitterFeed = HyTwitterFeed$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTwitterFeed, defineCustomElement };

package/components/hy-two-columns.d.ts

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

package/components/hy-two-columns.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const hyTwoColumnsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-two-columns{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.hy-two-columns h2,.hy-two-columns h3,.hy-two-columns h4,.hy-two-columns h5,.hy-two-columns h6{margin-top:0}.hy-two-columns p{margin-top:0}@media (min-width: 30rem){.hy-two-columns{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.hy-two-columns--reversed{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (min-width: 30rem){.hy-two-columns--reversed{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.hy-two-columns--reversed .hy-two-columns__item--side{margin-left:0;margin-right:0}@media (min-width: 30rem){.hy-two-columns--reversed .hy-two-columns__item--side{margin-right:5.79%}}@media (min-width: 60rem){.hy-two-columns--reversed .hy-two-columns__item--side{margin-right:8.5%}}.hy-two-columns__item{width:100%}.hy-two-columns__item [slot=main]{width:100%}.hy-two-columns__item [slot=main] .hy-paragraph-text{width:100% !important}.hy-two-columns__item [slot=side]{width:100%}.hy-two-columns__item--main{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;width:100%}@media (min-width: 30rem){.hy-two-columns__item--main{-ms-flex-preferred-size:67.01%;flex-basis:67.01%}}@media (min-width: 60rem){.hy-two-columns__item--main{-ms-flex-preferred-size:63%;flex-basis:63%}}.hy-two-columns__item--side{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0;width:100%}@media (min-width: 30rem){.hy-two-columns__item--side{-ms-flex-preferred-size:32.99%;flex-basis:32.99%;margin-left:5.79%}}@media (min-width: 60rem){.hy-two-columns__item--side{-ms-flex-preferred-size:37%;flex-basis:37%;margin-left:8.5%;padding:0}}.hy-two-columns__item--side hy-key-figure{padding:0 10.67%}@media (min-width: 30rem){.hy-two-columns__item--side hy-key-figure{padding:0}}";
+
+const HyTwoColumns$1 = /*@__PURE__*/ proxyCustomElement(class HyTwoColumns extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.reversed = false;
+  }
+  render() {
+    const classAttributes = ["hy-two-columns", this.reversed ? "hy-two-columns--reversed" : ""].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, h("div", { class: "hy-two-columns__item hy-two-columns__item--main" }, h("slot", { name: "main" })), h("div", { class: "hy-two-columns__item hy-two-columns__item--side" }, h("slot", { name: "side" })))));
+  }
+  static get style() { return hyTwoColumnsCss; }
+}, [4, "hy-two-columns", {
+    "reversed": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-two-columns"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-two-columns":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyTwoColumns$1);
+      }
+      break;
+  } });
+}
+
+const HyTwoColumns = HyTwoColumns$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyTwoColumns, defineCustomElement };

package/components/hy-user-login-form.d.ts

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