@itcenteratunihelsinki/huds-lib 0.8.43 → 0.8.44

package/components/hy-row.d.ts

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

package/components/hy-row.js

@@ -0,0 +1,50 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as css } from './emotion.esm.js';
+
+const rowCss = "div.hy-row{display:block}";
+
+const createCss = (justify, align, margin) => {
+  return css `
+    display: flex;
+    justify-content: ${justify};
+    align-items: ${align};
+    > * + * {
+      margin-left: ${margin}rem;
+    }
+  `;
+};
+const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.justify = "stretch";
+    this.align = "center";
+    this.margin = 1;
+  }
+  render() {
+    return (h("div", { class: createCss(this.justify, this.align, this.margin) }, h("slot", null)));
+  }
+  static get style() { return rowCss; }
+}, [4, "hy-row", {
+    "justify": [1],
+    "align": [1],
+    "margin": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Row);
+      }
+      break;
+  } });
+}
+
+const HyRow = Row;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyRow, defineCustomElement };

package/components/hy-search-field.d.ts

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

package/components/hy-search-field.js

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

package/components/hy-search-field2.js

@@ -0,0 +1,81 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { e as ColorVariant } from './utils.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const hySearchFieldCss = ":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}.search-field{display:inline-block;width:100%}@media (min-width: 30rem){.search-field{min-width:48.3%}}@media (min-width: 75.0625rem){.search-field{min-width:23.03%}}.search-field__label{font-size:0.875rem;line-height:20px;display:block;font-family:var(--main-font-family);letter-spacing:-0.44px;margin-bottom:8px;position:relative;text-decoration:none;width:100%}@media (min-width: 30rem){.search-field__label{font-size:1rem;line-height:20px}}.search-field__label.label-large{font-size:1.375rem;line-height:28px;letter-spacing:-0.7px;margin-bottom:0.75rem}@media (min-width: 30rem){.search-field__label.label-large{font-size:1.625rem;line-height:32px;letter-spacing:-0.8px;margin-bottom:1.25rem}}.search-field__label.bold{font-weight:700}.search-field__actions{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex}.search-field__wrapper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;position:relative}.search-field__input{font-size:1rem;line-height:24px;border-radius:0;border:1px solid var(--grayscale-medium-dark);caret-color:var(--brand-main-light);font-weight:bold;height:40px;letter-spacing:normal;padding:8px 12px;width:100%;zoom:0}@media (min-width: 30rem){.search-field__input{font-size:1rem;line-height:24px;height:44px}}@media (min-width: 75.0625rem){.search-field__input{height:48px}}.search-field__input::-webkit-input-placeholder{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-weight:normal}.search-field__input::-moz-placeholder{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-weight:normal}.search-field__input:-ms-input-placeholder{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-weight:normal}.search-field__input::-ms-input-placeholder{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-weight:normal}.search-field__input::placeholder{font-size:1rem;line-height:24px;color:var(--grayscale-dark);font-weight:normal}@media (min-width: 30rem){.search-field__input::-webkit-input-placeholder{font-size:1rem;line-height:24px}.search-field__input::-moz-placeholder{font-size:1rem;line-height:24px}.search-field__input:-ms-input-placeholder{font-size:1rem;line-height:24px}.search-field__input::-ms-input-placeholder{font-size:1rem;line-height:24px}.search-field__input::placeholder{font-size:1rem;line-height:24px}}.search-field__input:hover{border-color:var(--brand-main-light)}.search-field__input:focus{border-color:var(--brand-main-light);border-style:solid inset solid solid;border-width:2px;outline:0}.search-field__reset{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:40px}@media (min-width: 30rem){.search-field__reset{height:44px;width:44px}}@media (min-width: 75.0625rem){.search-field__reset{height:48px;width:48px}}.search-field__reset svg{fill:var(--grayscale-dark)}@media (min-width: 75.0625rem){.search-field__reset svg{height:16px;width:16px}}.search-field__reset:hover{cursor:pointer}.search-field__reset:focus{outline-color:var(--brand-main-light)}.search-field__submit{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--brand-main-light);border:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px}@media (min-width: 30rem){.search-field__submit{height:44px;width:44px}}@media (min-width: 75.0625rem){.search-field__submit{height:48px;width:48px}}@media (min-width: 30rem){.search-field__submit svg{height:20px;width:20px}}@media (min-width: 75.0625rem){.search-field__submit svg{height:22px;width:22px}}.search-field__submit:hover{cursor:pointer}s .search-field__submit:focus{outline-color:var(--brand-main-light)}";
+
+const HySearchField = /*@__PURE__*/ proxyCustomElement(class HySearchField extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = undefined;
+    this.isLabelBold = false;
+    this.labelLarge = false;
+    this.isLuomusSearch = false;
+    this.placeholder = "Type here...";
+    this.isLabelHidden = false;
+    this.inputId = undefined;
+    this.prefillParameter = "";
+    this.isInputValueEmpty = true;
+  }
+  componentDidLoad() {
+    const searchInput = this.el.querySelector(".search-field__input");
+    searchInput.addEventListener("keyup", (event) => {
+      const { value } = event.target;
+      this.isInputValueEmpty = value.length > 0 ? false : true;
+    });
+    if (this.prefillParameter.length > 0) {
+      if (window.location === undefined)
+        return;
+      const urlParams = new URLSearchParams(window.location.search);
+      const searchValue = urlParams.get(`${this.prefillParameter}`);
+      const searchInput = this.el.querySelector(".search-field__input");
+      searchInput.value = searchValue && searchValue.length > 0 ? searchValue : "";
+      this.isInputValueEmpty = false;
+    }
+  }
+  handleInputReset() {
+    this.isInputValueEmpty = true;
+    const searchInput = this.el.querySelector(".search-field__input");
+    searchInput.value = "";
+    searchInput.focus();
+  }
+  render() {
+    return (h(Host, { class: "search-field" }, !this.isLuomusSearch && (h("label", { htmlFor: this.inputId, class: `search-field__label 
+          ${this.isLabelHidden ? "visually-hidden" : ""} 
+          ${this.labelLarge ? "label-large" : ""} 
+          ${this.isLabelBold ? "bold" : ""}` }, this.label)), h("div", { class: "search-field__actions" }, h("div", { class: "search-field__wrapper" }, this.isLuomusSearch && (h("input", { id: this.inputId, name: "search", "data-drupal-selector": "edit-search", value: "", type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isLuomusSearch && (h("input", { id: this.inputId, type: "text", placeholder: this.placeholder, class: "search-field__input" })), !this.isInputValueEmpty && (h("button", { type: "button", class: "search-field__reset", "aria-label": "Reset", onClick: () => this.handleInputReset() }, h("hy-icon", { icon: "hy-icon-remove", size: 14, "aria-hidden": "true" })))), this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search", "data-drupal-selector": "edit-submit-luomus-search", id: "edit-submit-luomus-search", value: "Apply" }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))), !this.isLuomusSearch && (h("button", { type: "submit", class: "search-field__submit", "aria-label": "Search" }, h("hy-icon", { icon: "hy-icon-search", size: 18, fill: ColorVariant.white, "aria-hidden": "true" }))))));
+  }
+  get el() { return this; }
+  static get style() { return hySearchFieldCss; }
+}, [0, "hy-search-field", {
+    "label": [1],
+    "isLabelBold": [4, "is-label-bold"],
+    "labelLarge": [4, "label-large"],
+    "isLuomusSearch": [4, "is-luomus-search"],
+    "placeholder": [1],
+    "isLabelHidden": [4, "is-label-hidden"],
+    "inputId": [1, "input-id"],
+    "prefillParameter": [1, "prefill-parameter"],
+    "isInputValueEmpty": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-search-field", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-search-field":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HySearchField);
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { HySearchField as H, defineCustomElement as d };

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

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

package/components/hy-section-container.js

@@ -0,0 +1,32 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sectionContainerCss = ":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-section--container{display:block;width:100%;margin-left:auto;margin-right:auto}@media only screen and (min-width: 30rem){.hy-section--container{width:100%}}@media only screen and (min-width: 60rem){.hy-section--container{width:100%;max-width:60rem}}@media only screen and (min-width: 75.0625rem){.hy-section--container{width:100%;max-width:75rem}}";
+
+const SectionContainer = /*@__PURE__*/ proxyCustomElement(class SectionContainer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h("div", { class: "hy-section--container" }, h("slot", null)));
+  }
+  static get style() { return sectionContainerCss; }
+}, [4, "hy-section-container"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-section-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-section-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SectionContainer);
+      }
+      break;
+  } });
+}
+
+const HySectionContainer = SectionContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { HySectionContainer, defineCustomElement };

package/components/hy-shortcuts.d.ts

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

package/components/hy-shortcuts.js

@@ -0,0 +1,96 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { H as HeadingVarians } from './utils.js';
+import { d as defineCustomElement$4 } from './hy-box2.js';
+import { d as defineCustomElement$3 } from './heading.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const hyShortcutsCss = ":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-shortcuts{overflow:hidden}.hy-shortcuts .shortcut-link-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 calc(var(--gutter-mobile)* -1)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container{margin:0 calc(var(--gutter-narrow)* -1)}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container{margin:0 calc(var(--gutter-wide)* -1)}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:62px;padding:0 var(--gutter-mobile)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:70px;padding:0 var(--gutter-narrow)}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper{min-height:82px;padding:0 var(--gutter-wide)}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3{width:100%}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3{width:33.33%}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4{width:50%}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4{width:25%}}.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3.first a.shortcut-link,.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link{border-top:2.5px solid var(--brand-main-nearly-black)}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-3.first a.shortcut-link,.hy-shortcuts .shortcut-link-container .shortcut-link-wrapper.box-4.first a.shortcut-link{border-top:3px solid var(--brand-main-nearly-black)}}.hy-shortcuts .shortcut-link-container a.shortcut-link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-bottom:2.5px solid var(--brand-main-nearly-black);color:var(--brand-main-nearly-black);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);font-size:14px;font-weight:600;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:100%;letter-spacing:-0.44px;line-height:18px;min-height:70px;position:relative;text-decoration:none;word-break:break-word}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link{border-bottom:3px solid var(--brand-main-nearly-black);border-top:3px solid var(--brand-main-nearly-black);font-size:16px;letter-spacing:-0.5px;line-height:18px;min-height:70px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link{font-size:16px;letter-spacing:-0.5px;line-height:22px;min-height:82px}}.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 0 0 8px}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 0 0 12px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon{padding:0 4px 0 22px}}.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:20px;fill:var(--brand-main-light);width:20px}@media (min-width: 30rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:24px;width:24px}}@media (min-width: 60rem){.hy-shortcuts .shortcut-link-container a.shortcut-link .link-icon svg{height:28px;width:28px}}.hy-shortcuts .shortcut-link-container a.shortcut-link:hover{color:var(--brand-main)}.hy-shortcuts .shortcut-link-container a.shortcut-link:hover svg{fill:var(--brand-main)}";
+
+const HyShortcuts$1 = /*@__PURE__*/ proxyCustomElement(class HyShortcuts extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dataItems = undefined;
+    this.listHeading = "";
+    this.headerstyle = "default";
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._dataItems = JSON.parse(newValue);
+    }
+    else {
+      this._dataItems = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.arrayDataWatcher(this.dataItems);
+  }
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest(".hy-main");
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains("with-sidebar")) {
+        this.headerstyle = "large";
+      }
+    }
+  }
+  render() {
+    const classAttributes = ["hy-shortcuts", `hy-shortcuts__${this.headerstyle}`].join(" ");
+    const textClassAttributes = ["text"].join(" ");
+    const iconClassAttributes = ["link-icon"].join(" ");
+    let classItem = ["shortcut-link-wrapper", this._dataItems.length % 4 == 0 ? "box-4" : "box-3"].join(" ");
+    return (h(Host, null, h("div", { class: classAttributes }, this.listHeading.length > 0 && (h("hy-heading", { class: "list-title", heading: HeadingVarians.h2 }, this.listHeading)), h("div", { class: "shortcut-link-container" }, this._dataItems.map((x, index) => {
+      let isFirstLine = "";
+      if (this._dataItems.length % 4 == 0) {
+        isFirstLine = index == 0 || index == 1 ? "first" : "";
+      }
+      else {
+        isFirstLine = index == 0 ? "first" : "";
+      }
+      let classLinkWrapper = classItem.concat(" ", isFirstLine);
+      let target = x.isExternal ? "_blank" : "_self";
+      return (h("div", { class: classLinkWrapper }, h("a", { "aria-label": x.ariaLabel, class: "shortcut-link", href: x.url, target: target }, h("span", { class: textClassAttributes }, x.heading), h("span", { class: iconClassAttributes }, h("hy-icon", { icon: "hy-icon-arrow-right", size: 28 })))));
+    }))), h("hy-box", { mb: "1.75, 1.75, 2, 2.5" })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "dataItems": ["arrayDataWatcher"]
+  }; }
+  static get style() { return hyShortcutsCss; }
+}, [0, "hy-shortcuts", {
+    "dataItems": [1, "data-items"],
+    "listHeading": [1, "list-heading"],
+    "headerstyle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["hy-shortcuts", "hy-box", "hy-heading", "hy-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "hy-shortcuts":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HyShortcuts$1);
+      }
+      break;
+    case "hy-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "hy-heading":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "hy-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const HyShortcuts = HyShortcuts$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { HyShortcuts, defineCustomElement };

package/components/hy-site-header.d.ts

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