@oiz/stzh-components 0.0.0-pretest

package/dist/components/stzh-header.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, readTask, writeTask, h, Host } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
+import { m as media } from './media-utils.js';
+
+const stzhHeaderCss = ".sc-stzh-header-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::after{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@-webkit-keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}.sc-stzh-header-h .sc-stzh-header-s>img[slot=logo]{width:auto;height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login]{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover,.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover__trigger{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);height:auto}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{border-radius:0;height:100%}}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button__badge{top:0.5rem;right:0.4375rem}}.header__inner.sc-stzh-header{-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}.header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 800px){.header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:4rem}@supports ((position: -webkit-sticky) or (position: sticky)){.header__main.sc-stzh-header{padding-top:0}}}.header__metabar.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 800px){.header__metabar.sc-stzh-header{border-top:none;background-color:var(--stzh-color-grey5);z-index:1;position:absolute;top:0;left:0;right:0}@supports ((position: -webkit-sticky) or (position: sticky)){.header__metabar.sc-stzh-header{position:-webkit-sticky;position:sticky}}}.header__metabar-inner.sc-stzh-header{margin:0 1.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;height:3rem}@media screen and (min-width: 600px){.header__metabar-inner.sc-stzh-header{margin:0 2rem}}@media screen and (min-width: 1024px){.header__metabar-inner.sc-stzh-header{margin:0 2.5rem}}@media screen and (min-width: 1260px){.header__metabar-inner.sc-stzh-header{margin:0 5.5rem}}@media screen and (min-width: 1440px){.header__metabar-inner.sc-stzh-header{margin:0 auto;width:78.75rem}}@media screen and (max-width: 799px){.header__metabar-inner.sc-stzh-header{margin:0 auto}}@media screen and (min-width: 800px){.header__metabar-inner.sc-stzh-header{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;height:4rem}}.header__metabar-nav.sc-stzh-header{display:none}@media screen and (min-width: 800px){.header__metabar-nav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}.header__metabar-login.sc-stzh-header{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:50%;flex-basis:50%}@media screen and (min-width: 800px){.header__metabar-login.sc-stzh-header:not(:first-child){-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--stzh-space-small)}}.header__logobar.sc-stzh-header{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.header__logobar-logo.sc-stzh-header{-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);overflow:hidden;width:calc(100% - 3rem - 0.0625rem)}@media screen and (min-width: 800px){.header__logobar-logo.sc-stzh-header{width:25rem}}@media screen and (min-width: 1260px){.header__logobar-logo.sc-stzh-header{width:28.75rem}}@media screen and (min-width: 1440px){.header__logobar-logo.sc-stzh-header{padding-left:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.header__logo-link.sc-stzh-header{-ms-flex-positive:1;flex-grow:1;display:-ms-inline-flexbox;display:inline-flex;height:4.75rem;padding:var(--stzh-space-medium);padding-left:1.25rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.header__logo-link.sc-stzh-header{padding-left:2rem}}@media screen and (min-width: 800px){.header__logo-link.sc-stzh-header{height:5.625rem}}@media screen and (min-width: 1260px){.header__logo-link.sc-stzh-header{height:7.5rem;padding:var(--stzh-space-large);padding-left:5.5rem}}@media screen and (min-width: 1440px){.header__logo-link.sc-stzh-header{padding-left:0}}.header__appnav.sc-stzh-header{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--stzh-z-index-header) - 1);-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white)}@media screen and (min-width: 600px){.header__appnav.sc-stzh-header{position:static;-webkit-box-shadow:none;box-shadow:none}}@media screen and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin:0 1.25rem}}@media screen and (min-width: 600px) and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin:0 2rem}}@media screen and (min-width: 600px) and (min-width: 1024px){.header__appnav-inner.sc-stzh-header{margin:0 2.5rem}}@media screen and (min-width: 600px) and (min-width: 1260px){.header__appnav-inner.sc-stzh-header{margin:0 5.5rem}}@media screen and (min-width: 600px) and (min-width: 1440px){.header__appnav-inner.sc-stzh-header{margin:0 auto;width:78.75rem}}.header--hide-logo.sc-stzh-header .header__logo-link.sc-stzh-header{opacity:0}@media screen and (max-width: 799px){.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}}@media screen and (min-width: 800px){.header--sticky-metabar.sc-stzh-header:not(.header--sticky) .header__metabar.sc-stzh-header{position:fixed}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@media screen and (max-width: 599px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width: 799px){.header--sticky.sc-stzh-header .header__appnav.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}}.header--sticky.sc-stzh-header .header__metabar.sc-stzh-header{border-top:none}.header--sticky.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}.header--sticky.sc-stzh-header .header__logobar.sc-stzh-header{display:none}@media screen and (min-width: 600px){.header--sticky-closing.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.header--sticky-closing.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}";
+
+const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Portal link (for logo) */
+    this.href = "https://stadt-zuerich.ch";
+    /**
+     * Prevent creating a appnav placeholder element
+     * with the size of appnav inside header parent element.
+     * This prevents the fixed appnav to overlap
+     * content at the end on mikro breakpoint,
+     * but could lead to problems with certain layouts.
+     */
+    this.preventAppnavPlaceholder = false;
+    this.hideLogo = false;
+    this.sticky = false;
+    this.stickyClosing = false;
+    this.stickyMetabar = false;
+    this.stickyMetabarEnd = false;
+  }
+  /** Update position / sticky state of header */
+  async updatePosition() {
+    const removeSticky = () => {
+      this.sticky = false;
+      this.stickyClosing = false;
+      this.paddingTop = 0;
+    };
+    if (this.scrollingUp && this.belowStayStickyPoint) {
+      if (!this.sticky && this.belowStartStickyPoint) {
+        this.paddingTop = this.headerHeight;
+        this.sticky = true;
+      }
+      this.updateMetabarPosition();
+    }
+    else {
+      if (this.sticky && this.belowStayStickyPoint) {
+        const animationEnd = () => {
+          removeSticky();
+          this.updateMetabarPosition();
+          this.innerElement.removeEventListener('animationend', animationEnd);
+        };
+        this.innerElement.addEventListener('animationend', animationEnd);
+        this.stickyClosing = true;
+      }
+      else {
+        removeSticky();
+        this.updateMetabarPosition();
+      }
+    }
+  }
+  resizeListener() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(() => {
+      readTask(() => {
+        this.isSmall = media('small').matches;
+        this.isSmallheader = media('smallheader').matches;
+        this.headerTop = this.element.offsetTop;
+        this.headerHeight = this.element.offsetHeight;
+        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
+        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;
+      });
+      writeTask(() => {
+        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
+          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
+        }
+        else {
+          this.appnavPlaceholderElement.style.height = "0px";
+        }
+      });
+      this.scrollListener();
+    });
+  }
+  scrollListener() {
+    readTask(() => {
+      this.scrollTop = this.getScrollTop();
+      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
+      this.lastScrollTop = this.scrollTop;
+      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
+      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;
+      this.logobarHeight = this.sticky
+        ? this.isSmall
+          ? this.headerHeight - this.innerHeight
+          : this.headerHeight - this.mainHeight
+        : this.logobarElement
+          ? this.logobarElement.offsetHeight
+          : 0;
+      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;
+      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;
+      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;
+      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;
+    });
+    writeTask(() => {
+      this.updatePosition();
+    });
+  }
+  getScrollTop() {
+    return window.pageYOffset || document.documentElement.scrollTop;
+  }
+  updateMetabarPosition() {
+    if (!this.metabarElement) {
+      return;
+    }
+    if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
+      return;
+    }
+    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {
+      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {
+        this.stickyMetabar = true;
+        this.stickyMetabarEnd = false;
+        this.metabarTransform = 'translateY(0)';
+      }
+      else {
+        this.stickyMetabar = false;
+        this.stickyMetabarEnd = true;
+        this.metabarTransform = `translateY(${this.logobarHeight}px)`;
+      }
+    }
+    else {
+      this.stickyMetabar = false;
+      this.stickyMetabarEnd = false;
+      this.metabarTransform = 'translateY(0)';
+    }
+  }
+  connectedCallback() {
+    this.appnavPlaceholderElement = document.createElement("div");
+    this.element.parentElement.appendChild(this.appnavPlaceholderElement);
+  }
+  disconnectedCallback() {
+    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
+  }
+  render() {
+    const navSlotUsed = hasSlot(this.element, 'nav');
+    const loginSlotUsed = hasSlot(this.element, 'login');
+    const appnavSlotUsed = hasSlot(this.element, 'appnav');
+    const classes = {
+      "header": true,
+      "header--sticky": this.sticky,
+      "header--sticky-closing": this.stickyClosing,
+      "header--hide-logo": this.hideLogo,
+      "header--sticky-metabar": this.stickyMetabar,
+      "header--sticky-metabar-end": this.stickyMetabarEnd,
+      "header--has-empty-metabar": !navSlotUsed && !loginSlotUsed,
+      "header--has-appnav": appnavSlotUsed
+    };
+    return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));
+  }
+  get element() { return this; }
+  static get style() { return stzhHeaderCss; }
+}, [6, "stzh-header", {
+    "href": [1],
+    "preventAppnavPlaceholder": [4, "prevent-appnav-placeholder"],
+    "hideLogo": [32],
+    "paddingTop": [32],
+    "metabarTransform": [32],
+    "sticky": [32],
+    "stickyClosing": [32],
+    "stickyMetabar": [32],
+    "stickyMetabarEnd": [32],
+    "updatePosition": [64]
+  }, [[9, "resize", "resizeListener"], [8, "DOMContentLoaded", "resizeListener"], [8, "load", "resizeListener"], [9, "scroll", "scrollListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhHeader$1);
+      }
+      break;
+  } });
+}
+
+const StzhHeader = StzhHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhHeader, defineCustomElement };

package/dist/components/stzh-heading.d.ts

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

package/dist/components/stzh-heading.js

@@ -0,0 +1,6 @@
+import { S as StzhHeading$1, d as defineCustomElement$1 } from './stzh-heading2.js';
+
+const StzhHeading = StzhHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhHeading, defineCustomElement };

package/dist/components/stzh-heading2.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stzhHeadingCss = ".sc-stzh-heading-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-heading-h{display:none}.sc-stzh-heading-h *.sc-stzh-heading,.sc-stzh-heading-h *.sc-stzh-heading::before,.sc-stzh-heading-h *.sc-stzh-heading::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-heading-h{width:100%;--color:var(--stzh-heading-color);color:var(--color)}.stzh-heading.sc-stzh-heading{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing));color:var(--color);margin:0}@media screen and (min-width: 600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-xsmall);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 600px){.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1024px){.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-large)}}.stzh-heading--curve-hero.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-heading--curve-hero.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-heading--curve-hero.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-heading--curve-hero.stzh-heading--with-border.sc-stzh-heading{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 1024px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-heading-line-height, var(--stzh-font-nano-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-default-heading-letter-spacing, var(--stzh-font-nano-heading-letter-spacing))}@media screen and (min-width: 1024px){.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-medium-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}}.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-default-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}@media screen and (min-width: 1024px){.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-heading-letter-spacing)}}.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-default-heading-letter-spacing)}@media screen and (min-width: 1024px){.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-heading-letter-spacing)}}.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 1024px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-hero-default-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-medium-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-medium-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-medium-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-large-heading-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-heading-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}";
+
+const StzhHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Heading level */
+    this.level = "1";
+    /** Type of curve to overwrite the curve inherited from `level` attribute */
+    this.curve = "auto";
+    /** With border bottom separator */
+    this.withBorder = false;
+  }
+  render() {
+    const Heading = `h${this.level}`;
+    const classes = {
+      "stzh-heading": true,
+      "stzh-heading--with-border": this.withBorder,
+      [`stzh-heading--level-${this.level}`]: !!this.level,
+      [`stzh-heading--curve-${this.curve}`]: !!this.curve
+    };
+    return (h(Host, null, h(Heading, { class: classes }, h("slot", null))));
+  }
+  static get style() { return stzhHeadingCss; }
+}, [6, "stzh-heading", {
+    "level": [513],
+    "curve": [513],
+    "withBorder": [516, "with-border"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-heading"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-heading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhHeading);
+      }
+      break;
+  } });
+}
+
+export { StzhHeading as S, defineCustomElement as d };

package/dist/components/stzh-hr.d.ts

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

package/dist/components/stzh-hr.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stzhHrCss = ".sc-stzh-hr-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-hr-h{display:none}.sc-stzh-hr-h *.sc-stzh-hr,.sc-stzh-hr-h *.sc-stzh-hr::before,.sc-stzh-hr-h *.sc-stzh-hr::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-hr-h{--border-color:var(--stzh-base-border-color)}.stzh-hr.sc-stzh-hr{display:-ms-flexbox;display:flex;height:0.0625rem;background-color:var(--border-color)}";
+
+const StzhHr$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    const classes = {
+      "stzh-hr": true
+    };
+    return (h(Host, null, h("div", { class: classes })));
+  }
+  get element() { return this; }
+  static get style() { return stzhHrCss; }
+}, [2, "stzh-hr"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-hr"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-hr":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhHr$1);
+      }
+      break;
+  } });
+}
+
+const StzhHr = StzhHr$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhHr, defineCustomElement };

package/dist/components/stzh-hspace.d.ts

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

package/dist/components/stzh-hspace.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stzhHspaceCss = ".sc-stzh-hspace-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-hspace-h{display:none}.sc-stzh-hspace-h *.sc-stzh-hspace,.sc-stzh-hspace-h *.sc-stzh-hspace::before,.sc-stzh-hspace-h *.sc-stzh-hspace::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-hspace-h{--space:var(--stzh-space-default);--around:0}.sc-stzh-hspace-h .sc-stzh-hspace-s>*{max-width:100%;padding-left:calc(var(--space) * var(--around));padding-right:calc(var(--space) * var(--around));margin:0}.sc-stzh-hspace-h .sc-stzh-hspace-s>*:not(:last-child){margin-right:calc(var(--space) * (1 - var(--around)))}.sc-stzh-hspace-h .sc-stzh-hspace-s>stzh-vspace,.sc-stzh-hspace-h .sc-stzh-hspace-s>stzh-hspace,.sc-stzh-hspace-h .sc-stzh-hspace-s>stzh-row,.sc-stzh-hspace-h .sc-stzh-hspace-s>stzh-container,.sc-stzh-hspace-h .sc-stzh-hspace-s>stzh-section{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}[around].sc-stzh-hspace-h{--around:1}[curve=tiny].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){[curve=tiny].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){[curve=tiny].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){[curve=tiny].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}[curve=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}@media screen and (min-width: 1024px){[curve=small].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}[curve=regular].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){[curve=regular].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){[curve=regular].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}[curve=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}@media screen and (min-width: 600px){[curve=medium].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){[curve=medium].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[curve=medium].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}[curve=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}@media screen and (min-width: 600px){[curve=large].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){[curve=large].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){[curve=large].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}[curve=big].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){[curve=big].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){[curve=big].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}[curve=huge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){[curve=huge].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){[curve=huge].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){[curve=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}[size=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}[size=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}[size=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}[size=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}[size=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}[size=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}[size=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}[size=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}[size=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}[size=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}[size=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}[size=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}[size=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}[size=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}[size=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}[size=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}@media screen and (min-width: 600px){[size-small=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){[size-small=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){[size-small=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){[size-small=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){[size-small=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){[size-small=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){[size-small=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){[size-small=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){[size-small=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){[size-small=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){[size-small=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){[size-small=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){[size-small=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){[size-small=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){[size-small=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){[size-small=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 800px){[size-smallheader=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){[size-smallheader=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){[size-smallheader=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){[size-smallheader=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 800px){[size-smallheader=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){[size-smallheader=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 800px){[size-smallheader=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){[size-smallheader=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){[size-smallheader=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 800px){[size-smallheader=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){[size-smallheader=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){[size-smallheader=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){[size-smallheader=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 800px){[size-smallheader=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){[size-medium=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){[size-medium=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){[size-medium=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){[size-medium=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){[size-medium=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){[size-medium=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){[size-medium=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){[size-medium=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){[size-medium=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){[size-medium=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){[size-medium=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){[size-medium=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){[size-medium=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){[size-medium=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){[size-medium=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){[size-medium=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){[size-large=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){[size-large=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){[size-large=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){[size-large=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[size-large=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){[size-large=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){[size-large=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){[size-large=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){[size-large=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){[size-large=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){[size-large=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){[size-large=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){[size-large=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){[size-large=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){[size-large=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){[size-large=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){[size-ultra=xxxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){[size-ultra=xxsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){[size-ultra=xsmall].sc-stzh-hspace-h{--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){[size-ultra=small].sc-stzh-hspace-h{--space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){[size-ultra=medium].sc-stzh-hspace-h{--space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){[size-ultra=large].sc-stzh-hspace-h{--space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){[size-ultra=xlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){[size-ultra=xxxxlarge].sc-stzh-hspace-h{--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){[size-ultra=big].sc-stzh-hspace-h{--space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){[size-ultra=xbig].sc-stzh-hspace-h{--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){[size-ultra=huge].sc-stzh-hspace-h{--space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){[size-ultra=xhuge].sc-stzh-hspace-h{--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){[size-ultra=none].sc-stzh-hspace-h{--space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){[size-ultra=default].sc-stzh-hspace-h{--space:var(--stzh-space-default)}}.stzh-hspace.sc-stzh-hspace{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start;padding:0;margin:0}.stzh-hspace.sc-stzh-hspace:empty{width:var(--space)}.stzh-hspace--border-left.sc-stzh-hspace{border-left:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--border-right.sc-stzh-hspace{border-right:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--justify-center.sc-stzh-hspace{-ms-flex-pack:center;justify-content:center}.stzh-hspace--justify-end.sc-stzh-hspace{-ms-flex-pack:end;justify-content:flex-end}.stzh-hspace--justify-between.sc-stzh-hspace{-ms-flex-pack:justify;justify-content:space-between}.stzh-hspace--justify-around.sc-stzh-hspace{-ms-flex-pack:distribute;justify-content:space-around}.stzh-hspace--justify-evenly.sc-stzh-hspace{-ms-flex-pack:space-evenly;justify-content:space-evenly}";
+
+const StzhHspace$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Type of curve */
+    this.curve = "none";
+    /** Type of size */
+    this.size = "inherit";
+    /** Type of size above small breakpoint  */
+    this.sizeSmall = "inherit";
+    /** Type of size above medium breakpoint  */
+    this.sizeMedium = "inherit";
+    /** Type of size above large breakpoint  */
+    this.sizeLarge = "inherit";
+    /** Type of size above ultra breakpoint  */
+    this.sizeUltra = "inherit";
+    /** Alignment */
+    this.justify = "start";
+    /** Apply spacing to slotted elements */
+    this.around = false;
+    /** Add border */
+    this.border = "none";
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "stzh-hspace": true,
+        [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
+        [`stzh-hspace--border-${this.border}`]: !!this.border
+      } }, h("slot", null))));
+  }
+  static get style() { return stzhHspaceCss; }
+}, [6, "stzh-hspace", {
+    "curve": [1],
+    "size": [1],
+    "sizeSmall": [1, "size-small"],
+    "sizeMedium": [1, "size-medium"],
+    "sizeLarge": [1, "size-large"],
+    "sizeUltra": [1, "size-ultra"],
+    "justify": [1],
+    "around": [4],
+    "border": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-hspace"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-hspace":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhHspace$1);
+      }
+      break;
+  } });
+}
+
+const StzhHspace = StzhHspace$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhHspace, defineCustomElement };

package/dist/components/stzh-icon-sprite.d.ts

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