@itcenteratunihelsinki/huds-lib 0.8.42 → 0.8.44

package/components/hy-baseline.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as css } from './emotion.esm.js';
+
+const baselineCss = "div.hy-baseline{display:block}";
+
+const createCss = (value) => {
+  return css `
+    > * + * {
+      margin-top: ${value}rem;
+      display: block;
+    }
+  `;
+};
+const Baseline = /*@__PURE__*/ proxyCustomElement(class Baseline extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.margin = 1;
+  }
+  render() {
+    return (h("div", { class: createCss(this.margin) }, h("slot", null)));
+  }
+  static get style() { return baselineCss; }
+}, [4, "hy-baseline", {
+    "margin": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-baseline"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-baseline":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Baseline);
+      }
+      break;
+  } });
+}
+
+const HyBaseline = Baseline;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyBaseline, defineCustomElement };

package/components/hy-box-container.d.ts

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

package/components/hy-box-container.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as css } from './emotion.esm.js';
+
+const hyBoxContainerCss = ":host{display:block}";
+
+const HyBoxContainer$1 = /*@__PURE__*/ proxyCustomElement(class HyBoxContainer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.wrap = true;
+    this.maxWidth = true;
+  }
+  render() {
+    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%"};
+          ` }, h("slot", null))));
+  }
+  static get style() { return hyBoxContainerCss; }
+}, [4, "hy-box-container", {
+    "wrap": [4],
+    "maxWidth": [4, "max-width"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-box-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-box-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyBoxContainer$1);
+      }
+      break;
+  } });
+}
+
+const HyBoxContainer = HyBoxContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyBoxContainer, defineCustomElement };

package/components/hy-box.d.ts

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

package/components/hy-box.js

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

package/components/hy-box2.js

@@ -0,0 +1,195 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as css } from './emotion.esm.js';
+
+const hyBoxCss = ":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}";
+
+/*
+Example of using hy-box:
+<hy-box mb="1.75, 1.75, 2, 2.5" />
+Where mb = margin-bottom,
+mobile up to 30rem: 1.75rem (mb[0])
+tablet, 30rem - 60rem: 1.75rem (mb[1])
+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;
+};
+const breakpoints = ["30rem", "60rem", "75.0625rem", "100.0625rem"];
+/*
+Default - mobile
+mq[0] - tablet
+mq[1] - wide, >960px
+mq[2] - extrawide, > 1200px
+mq[3] - xlarge, >1600px
+* */
+const mq = breakpoints.map((b) => `@media (min-width: ${b})`);
+const createCssClass = ({ hasSidebar, pt, pb, pl, pr, mt, mb, ml, mr, h, bg, width, justify, align, direction }) => {
+  const last = width[width.length - 1];
+  return css `
+    padding-top: ${toRemValue(pt[0])};
+    padding-right: ${toRemValue(pr[0])};
+    padding-bottom: ${toRemValue(pb[0])};
+    padding-left: ${toRemValue(pl[0])};
+    margin-top: ${toRemValue(mt[0])};
+    margin-right: ${toRemValue(mr[0])};
+    margin-bottom: ${toRemValue(mb[0])};
+    margin-left: ${toRemValue(ml[0])};
+    height: ${toRemValue(h)};
+    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"};
+
+    ${mq[0]} {
+      width: ${width[1]};
+
+      padding-top: ${toRemValue(pt[1])};
+      padding-right: ${toRemValue(pr[1])};
+      padding-bottom: ${toRemValue(pb[1])};
+      padding-left: ${toRemValue(pl[1])};
+
+      margin-top: ${toRemValue(mt[1])};
+      margin-right: ${toRemValue(mr[1])};
+      margin-bottom: ${toRemValue(mb[1])};
+      margin-left: ${toRemValue(ml[1])};
+    }
+    ${mq[1]} {
+      width: ${width[2] || last};
+
+      padding-top: ${toRemValue(pt[2])};
+      padding-right: ${toRemValue(pr[2])};
+      padding-bottom: ${toRemValue(pb[2])};
+      padding-left: ${toRemValue(pl[2])};
+
+      margin-top: ${toRemValue(mt[2])};
+      margin-right: ${toRemValue(mr[2])};
+      margin-bottom: ${toRemValue(mb[2])};
+      margin-left: ${toRemValue(ml[2])};
+    }
+    ${mq[2]} {
+      width: ${width[3] || last};
+
+      padding-top: ${hasSidebar ? `${toRemValue(pt[2])}` : `${toRemValue(pt[3])}`};
+      padding-right: ${hasSidebar ? `${toRemValue(pr[2])}` : `${toRemValue(pr[3])}`};
+      padding-bottom: ${hasSidebar ? `${toRemValue(pb[2])}` : `${toRemValue(pb[3])}`};
+      padding-left: ${hasSidebar ? `${toRemValue(pl[2])}` : `${toRemValue(pl[3])}`};
+
+      margin-top: ${hasSidebar ? `${toRemValue(mt[2])}` : `${toRemValue(mt[3])}`};
+      margin-right: ${hasSidebar ? `${toRemValue(mr[2])}` : `${toRemValue(mr[3])}`};
+      margin-bottom: ${hasSidebar ? `${toRemValue(mb[2])}` : `${toRemValue(mb[3])}`};
+      margin-left: ${hasSidebar ? `${toRemValue(ml[2])}` : `${toRemValue(ml[3])}`};
+    }
+    ${mq[3]} {
+      width: ${width[4] || last};
+
+      padding-top: ${toRemValue(pt[3])};
+      padding-right: ${toRemValue(pr[3])};
+      padding-bottom: ${toRemValue(pb[3])};
+      padding-left: ${toRemValue(pl[3])};
+
+      margin-top: ${toRemValue(mt[3])};
+      margin-right: ${toRemValue(mr[3])};
+      margin-bottom: ${toRemValue(mb[3])};
+      margin-left: ${toRemValue(ml[3])};
+    }
+  `;
+};
+const toNumArray = (value) => value === null || value === void 0 ? void 0 : value.split(",").map((v) => `${v.trim()}`).map((v) => parseFloat(v));
+const HyBox = /*@__PURE__*/ proxyCustomElement(class HyBox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headerstyle = "common";
+    this.p = undefined;
+    this.pl = undefined;
+    this.pr = undefined;
+    this.pb = undefined;
+    this.pt = undefined;
+    this.m = undefined;
+    this.ml = undefined;
+    this.mr = undefined;
+    this.mb = undefined;
+    this.mt = undefined;
+    this.justify = "flex-start";
+    this.align = "baseline";
+    this.h = undefined;
+    this.bg = "transparent";
+    this.width = "100";
+    this.direction = "row";
+  }
+  componentWillLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const pt = (_b = (_a = toNumArray(this.pt)) !== null && _a !== void 0 ? _a : toNumArray(this.p)) !== null && _b !== void 0 ? _b : [0];
+    const pb = (_d = (_c = toNumArray(this.pb)) !== null && _c !== void 0 ? _c : toNumArray(this.p)) !== null && _d !== void 0 ? _d : [0];
+    const pr = (_f = (_e = toNumArray(this.pr)) !== null && _e !== void 0 ? _e : toNumArray(this.p)) !== null && _f !== void 0 ? _f : [0];
+    const pl = (_h = (_g = toNumArray(this.pl)) !== null && _g !== void 0 ? _g : toNumArray(this.p)) !== null && _h !== void 0 ? _h : [0];
+    const mt = (_k = (_j = toNumArray(this.mt)) !== null && _j !== void 0 ? _j : toNumArray(this.m)) !== null && _k !== void 0 ? _k : [0];
+    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";
+    return (h(Host, { class: createCssClass({
+        hasSidebar,
+        pt,
+        pl,
+        pr,
+        pb,
+        mt,
+        ml,
+        mr,
+        mb,
+        h: this.h,
+        bg: this.bg,
+        width: this.width.split(",").map((v) => `${v.trim()}%`),
+        justify: this.justify,
+        align: this.align,
+        direction: this.direction,
+      }) }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return hyBoxCss; }
+}, [4, "hy-box", {
+    "headerstyle": [1],
+    "p": [1],
+    "pl": [1],
+    "pr": [1],
+    "pb": [1],
+    "pt": [1],
+    "m": [1],
+    "ml": [1],
+    "mr": [1],
+    "mb": [1],
+    "mt": [1],
+    "justify": [1],
+    "align": [1],
+    "h": [2],
+    "bg": [1],
+    "width": [1],
+    "direction": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyBox);
+      }
+      break;
+  } });
+}
+
+export { HyBox as H, defineCustomElement as d };

package/components/hy-breadcrumbs.d.ts

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

package/components/hy-breadcrumbs.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { B as BreadcrumbVariants } from './utils.js';
+import { j as jsonParserWorker } from './globalScript.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyBreadcrumbsCss = ":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-breadcrumbs{display:inline-block;position:relative;width:auto}.hy-breadcrumbs.is-condensed{width:100%}.hy-breadcrumbs ol{margin:0;padding:0}.hy-breadcrumbs .breadcrumb-container{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin:0;padding:20px 0 16px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-container{padding:24px 0 16px}}@media (min-width: 75.0625rem){.hy-breadcrumbs .breadcrumb-container{padding:32px 0 16px}}.hy-breadcrumbs .breadcrumb-item{font-size:0.9375rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:600;font-family:var(--main-font-family);margin-bottom:0.75rem;letter-spacing:-0.5px}@media (min-width: 30rem){.hy-breadcrumbs .breadcrumb-item{margin-bottom:1rem}}.hy-breadcrumbs .breadcrumb-item .breadcrumb-item__link{color:var(--brand-main-light);text-decoration:none}.hy-breadcrumbs .breadcrumb-item .breadcrumb-item__icon{margin:0 21px}.hy-breadcrumbs .breadcrumb-item:hover .breadcrumb-item__link{color:var(--brand-main-active)}.hy-breadcrumbs .breadcrumb-item--current a{font-size:0.9375rem;line-height:20px;color:var(--grayscale-dark);display:block;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.5px;text-decoration:none}";
+
+const HyBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class HyBreadcrumbs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dataItems = undefined;
+    this.variant = BreadcrumbVariants.default;
+    this.headerstyle = "with-sidebar";
+    this.menuOpen = false;
+  }
+  async componentWillLoad() {
+    this._dataItems = await jsonParserWorker(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "without-sidebar";
+      }
+    }
+  }
+  render() {
+    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 })));
+      }
+      else {
+        return (h("li", { class: "breadcrumb-item breadcrumb-item--current" }, h("a", { href: item.url, "aria-current": "page" }, item.text)));
+      }
+    }))));
+  }
+  get el() { return this; }
+  static get style() { return hyBreadcrumbsCss; }
+}, [0, "hy-breadcrumbs", {
+    "dataItems": [1, "data-items"],
+    "variant": [1],
+    "headerstyle": [1],
+    "menuOpen": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-breadcrumbs", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-breadcrumbs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyBreadcrumbs$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyBreadcrumbs = HyBreadcrumbs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyBreadcrumbs, defineCustomElement };

package/components/hy-button.d.ts

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

package/components/hy-button.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const colors = {
+  brandMain: "#0e688b",
+  brandMainLight: "#107eab",
+  brandMainActive: "#005379",
+  brandMainDark: "#003146",
+  brandMainNearlyBlack: "#000222",
+  grayscaleWhite: "#fff",
+  grayscaleLight: "#f8f8f8",
+  grayscaleMedium: "#d2d2d2",
+  grayscaleBackgroundBox: "#f5f5f5",
+  grayscaleBackgroundArrow: "#dfdfdf",
+  grayscaleMediumDark: "#979797",
+  grayscaleDark: "#555555",
+  grayscaleBlack: "#000000",
+  additionalRedLight: "#E5053A",
+  additionalRedDark: "#A31621",
+  additionalPurpleLight: "#420039",
+  additionalYellow: "#F9A21A",
+  additionalSkyblue: "#48C5F8",
+  additionalOrange: "#D14600",
+  additionalGreenLight: "#96BA3C",
+  additionalGreenDark: "#006400",
+};
+
+const buttonCss = "@charset \"UTF-8\";: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;-webkit-box-sizing:border-box;box-sizing:border-box}.hy-button__icon{-ms-flex-line-pack:center;align-content:center;display:-webkit-box;display:-ms-flexbox;display:flex}.hy-button{display:block;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main);color:var(--grayscale-white);font-family:var(--main-font-family);border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.9375rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:0.9375rem;margin:0;padding:0;-webkit-transition-duration:0.1s;transition-duration:0.1s;-webkit-transition-property:all;transition-property:all;min-height:44px;position:relative;text-decoration:none}.hy-button.size-large{min-height:48px}.hy-button.primary{background-color:var(--brand-main);color:var(--grayscale-white)}.hy-button.primary .hy-button__icon{padding:8px 13px}.hy-button.primary svg{fill:var(--grayscale-white)}.hy-button.primary:hover{background-color:var(--brand-main-active)}.hy-button.primary:active{background-color:var(--brand-main-dark)}.hy-button.primary:disabled{background-color:var(--grayscale-medium);color:var(--grayscale-dark)}.hy-button.primary:disabled svg{fill:var(--grayscale-dark)}.hy-button.primary:focus{outline:solid 2px var(--additional-yellow);outline-offset:2px}.hy-button.secondary{background-color:transparent;border:solid 2px var(--brand-main);color:var(--brand-main)}.hy-button.secondary svg{fill:var(--brand-main)}.hy-button.secondary:hover{border:solid 2px var(--brand-main-active);color:var(--brand-main-active)}.hy-button.secondary:hover svg{fill:var(--brand-main-active)}.hy-button.secondary:active{border:solid 2px var(--brand-main-dark);color:var(--brand-main-dark)}.hy-button.secondary:active svg{fill:var(--brand-main-dark)}.hy-button.secondary:disabled{border:solid 2px var(--grayscale-medium-dark);color:var(--grayscale-medium-dark)}.hy-button.secondary:disabled svg{fill:var(--grayscale-medium-dark)}.hy-button::after{content:\"\";display:block;border-bottom:2px solid var(--additional-skyblue);position:absolute;bottom:-3.5px;left:3px;right:3px;z-index:0}.hy-button.primary::after{bottom:-2px}.hy-button:disabled{cursor:not-allowed}.hy-button:disabled::after{border-bottom:2px solid var(--grayscale-medium-dark);bottom:-3.5px}.hy-button:disabled.primary::after{bottom:-2px}.hy-button .hy-button__text{margin:12px 24px}.hy-button .hy-button__icon-right{padding-right:12px}hy-button[icon-right=hy-icon-arrow-right] .primary .hy-button__text{margin:12px 0 12px 16px;padding-right:16px}hy-button[icon-right=hy-icon-arrow-right] .primary:not(disabled) .hy-button__text{border-right:solid 1px var(--additional-skyblue)}hy-button[icon-right=hy-icon-arrow-right] .primary:disabled .hy-button__text{border-right:solid 1px var(--grayscale-dark)}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__text{margin:12px 16px}hy-button[icon-right=hy-icon-arrow-right] .secondary .hy-button__icon{padding-right:1rem;padding-left:0}hy-button[icon=hy-icon-arrow-left] .primary .hy-button__text{margin:12px 16px 12px 0;padding-left:16px}hy-button[icon=hy-icon-arrow-left] .primary:not(disabled) .hy-button__text{border-left:solid 1px var(--additional-skyblue)}hy-button[icon=hy-icon-arrow-left] .primary:disabled .hy-button__text{border-left:solid 1px var(--grayscale-dark)}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__text{margin:12px 16px}hy-button[icon=hy-icon-arrow-left] .secondary .hy-button__icon{padding-left:1rem;padding-right:0}";
+
+const fillcolors = {
+  primary: colors.brandMain,
+  secondary: "white",
+};
+const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.buttonType = "submit";
+    this.buttonClasses = "";
+    this.variant = "primary";
+    this.state = "enabled";
+    this.size = "normal";
+    this.disabled = false;
+    this.url = "";
+    this.ariaLabel = "";
+    this.isExternal = false;
+    this.icon = undefined;
+    this.iconRight = undefined;
+    this.attrs = "";
+  }
+  render() {
+    const classAttributes = ["hy-button", this.variant, this.state, "size-" + this.size, this.buttonClasses];
+    const iconFillColor = fillcolors[this.variant];
+    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 key = parts[0];
+        let value = parts[1];
+        key = key.replaceAll('"', " ");
+        key = key.trim();
+        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 }))))));
+  }
+  static get style() { return buttonCss; }
+}, [4, "hy-button", {
+    "buttonType": [1, "button-type"],
+    "buttonClasses": [1, "button-classes"],
+    "variant": [1],
+    "state": [1],
+    "size": [1],
+    "disabled": [4],
+    "url": [1],
+    "ariaLabel": [1, "aria-label"],
+    "isExternal": [4, "is-external"],
+    "icon": [1],
+    "iconRight": [1, "icon-right"],
+    "attrs": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-button", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Button);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyButton, defineCustomElement };

package/components/hy-checkbox.d.ts

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

package/components/hy-checkbox.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { b as CheckboxVariants } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyCheckboxCss = ":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-checkbox{display:inline-block;position:relative;margin-right:1rem}.hy-checkbox__checkmark{border-color:var(--link-blue);border-style:solid inset solid solid;border-width:2px;height:20px;margin-right:6px;min-width:20px;min-height:20px;position:relative;width:20px}.hy-checkbox__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox__checkmark::before{background-color:var(--grayscale-white);content:\"\";height:10px;position:absolute;right:0;-webkit-transform:rotate(40deg) translate(6%, -55%);transform:rotate(40deg) translate(6%, -55%);visibility:hidden;width:8px}.hy-checkbox__label{font-size:0.875rem;line-height:20px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--grayscale-black);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);letter-spacing:-0.4px;text-align:left}@media (min-width: 30rem){.hy-checkbox__label{font-size:1rem;line-height:20px}}.hy-checkbox__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox__checkbox:checked+label{color:var(--grayscale-black)}.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark svg,.hy-checkbox__checkbox:checked+label .hy-checkbox__checkmark::before{visibility:visible}.hy-checkbox__checkbox:hover{cursor:pointer}.hy-checkbox__checkbox:hover+label{color:var(--brand-main)}.hy-checkbox__checkbox:focus+label{outline-offset:1px;outline:2px solid var(--link-blue)}.hy-checkbox--button{display:inline-block;margin-right:4px;position:relative}.hy-checkbox--button__label{font-size:0.75rem;line-height:14px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0.5px solid var(--grayscale-medium-dark);color:var(--link-blue);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--main-font-family);font-weight:600;letter-spacing:-0.3px;padding:12px 15px 12px 13px;z-index:1}@media (min-width: 60rem){.hy-checkbox--button__label{font-size:0.875rem;line-height:18px;letter-spacing:-0.4px;padding:9px 8px 9px 8px}}.hy-checkbox--button__checkmark{position:absolute;right:12px;top:0;bottom:0}@media (min-width: 60rem){.hy-checkbox--button__checkmark{right:10px;bottom:calc(50% + 10px)}}.hy-checkbox--button__checkmark svg{bottom:0;left:0;position:absolute;visibility:hidden}.hy-checkbox--button__label-icon{height:13px;position:absolute;width:12px}@media (min-width: 60rem){.hy-checkbox--button__label-icon{padding:10px;right:-6px;top:calc(50% + 5px)}}.hy-checkbox--button__label-icon svg{background:var(--grayscale-white);height:12px;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:12px}.hy-checkbox--button__checkbox{height:100%;margin:0;opacity:0;position:absolute;width:100%;z-index:10}.hy-checkbox--button__checkbox:checked+label{border:1px solid var(--grayscale-black);color:var(--grayscale-black);padding:12px 15px 12px 13px}@media (min-width: 60rem){.hy-checkbox--button__checkbox:checked+label{border:2px solid var(--grayscale-black);padding:8px 26px 8px 7px}}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark .hy-checkbox--button__label-icon{background:var(--grayscale-white)}.hy-checkbox--button__checkbox:checked+label .hy-checkbox--button__checkmark svg{visibility:visible}.hy-checkbox--button__checkbox:hover{cursor:pointer}.hy-checkbox--button__checkbox:focus+label{outline-offset:1px;outline:1px solid var(--link-blue)}";
+
+const HyCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class HyCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.checkboxId = undefined;
+    this.checkboxValue = undefined;
+    this.checkboxLabel = undefined;
+    this.checkboxChecked = false;
+    this.variant = CheckboxVariants.default;
+  }
+  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" })))));
+      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)));
+    }
+  }
+  static get style() { return hyCheckboxCss; }
+}, [0, "hy-checkbox", {
+    "checkboxId": [8, "checkbox-id"],
+    "checkboxValue": [8, "checkbox-value"],
+    "checkboxLabel": [1, "checkbox-label"],
+    "checkboxChecked": [4, "checkbox-checked"],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-checkbox", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyCheckbox$1);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyCheckbox = HyCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyCheckbox, defineCustomElement };

package/components/hy-collaboration.d.ts

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