@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/cjs/stzh-header.cjs.entry.js

@@ -3,160 +3,160 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
-const mediaUtils = require('./media-utils-f1720906.js');
+const utils = require('./utils-8dc66449.js');
+const mediaUtils = require('./media-utils-8cfc8591.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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(() => {
-      index.readTask(() => {
-        this.isSmall = mediaUtils.media('small').matches;
-        this.isSmallheader = mediaUtils.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;
-      });
-      index.writeTask(() => {
-        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
-          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
-        }
-        else {
-          this.appnavPlaceholderElement.style.height = "0px";
-        }
-      });
-      this.scrollListener();
-    });
-  }
-  scrollListener() {
-    index.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;
-    });
-    index.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 = utils.hasSlot(this.element, 'nav');
-    const loginSlotUsed = utils.hasSlot(this.element, 'login');
-    const appnavSlotUsed = utils.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 (index.h(index.Host, null, index.h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, index.h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, index.h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, index.h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, index.h("div", { class: "header__logobar-logo" }, index.h("a", { href: this.href, class: "header__logo-link" }, index.h("slot", { name: "logo" })))), index.h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, index.h("div", { class: "header__metabar-inner" }, index.h("div", { class: "header__metabar-nav" }, index.h("slot", { name: "nav" })), index.h("div", { class: "header__metabar-login" }, index.h("slot", { name: "login" }))))), index.h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, index.h("div", { class: "header__appnav-inner" }, index.h("slot", { name: "appnav" })))))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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(() => {
+      index.readTask(() => {
+        this.isSmall = mediaUtils.media('small').matches;
+        this.isSmallheader = mediaUtils.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;
+      });
+      index.writeTask(() => {
+        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {
+          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;
+        }
+        else {
+          this.appnavPlaceholderElement.style.height = "0px";
+        }
+      });
+      this.scrollListener();
+    });
+  }
+  scrollListener() {
+    index.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;
+    });
+    index.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 = utils.hasSlot(this.element, 'nav');
+    const loginSlotUsed = utils.hasSlot(this.element, 'login');
+    const appnavSlotUsed = utils.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 (index.h(index.Host, null, index.h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, index.h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, index.h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, index.h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, index.h("div", { class: "header__logobar-logo" }, index.h("a", { href: this.href, class: "header__logo-link" }, index.h("slot", { name: "logo" })))), index.h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, index.h("div", { class: "header__metabar-inner" }, index.h("div", { class: "header__metabar-nav" }, index.h("slot", { name: "nav" })), index.h("div", { class: "header__metabar-login" }, index.h("slot", { name: "login" }))))), index.h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, index.h("div", { class: "header__appnav-inner" }, index.h("slot", { name: "appnav" })))))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhHeader.style = stzhHeaderCss;
 
 exports.stzh_header = StzhHeader;

package/dist/cjs/stzh-heading.cjs.entry.js

@@ -6,27 +6,27 @@ const index = require('./index-ac9bdc7f.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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 (index.h(index.Host, null, index.h(Heading, { class: classes }, index.h("slot", null))));
-  }
-};
+const StzhHeading = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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 (index.h(index.Host, null, index.h(Heading, { class: classes }, index.h("slot", null))));
+  }
+};
 StzhHeading.style = stzhHeadingCss;
 
 exports.stzh_heading = StzhHeading;

package/dist/cjs/stzh-hr.cjs.entry.js

@@ -6,18 +6,18 @@ const index = require('./index-ac9bdc7f.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const classes = {
-      "stzh-hr": true
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes })));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhHr = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const classes = {
+      "stzh-hr": true
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes })));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhHr.style = stzhHrCss;
 
 exports.stzh_hr = StzhHr;

package/dist/cjs/stzh-hspace.cjs.entry.js

@@ -6,36 +6,36 @@ const index = require('./index-ac9bdc7f.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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 (index.h(index.Host, null, index.h("div", { class: {
-        "stzh-hspace": true,
-        [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
-        [`stzh-hspace--border-${this.border}`]: !!this.border
-      } }, index.h("slot", null))));
-  }
-};
+const StzhHspace = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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 (index.h(index.Host, null, index.h("div", { class: {
+        "stzh-hspace": true,
+        [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
+        [`stzh-hspace--border-${this.border}`]: !!this.border
+      } }, index.h("slot", null))));
+  }
+};
 StzhHspace.style = stzhHspaceCss;
 
 exports.stzh_hspace = StzhHspace;

package/dist/cjs/stzh-icon-sprite.cjs.entry.js

@@ -8,15 +8,15 @@ const Sprite = `<svg width="0" height="0" style="position:absolute"><symbol fill
 
 const stzhIconSpriteCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-icon-sprite path{vector-effect:var(--stzh-base-vector-effect)}";
 
-const StzhIconSprite = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "stzh-icon-sprite" }, index.h("div", { innerHTML: Sprite }))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-};
+const StzhIconSprite = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "stzh-icon-sprite" }, index.h("div", { innerHTML: Sprite }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
 StzhIconSprite.style = stzhIconSpriteCss;
 
 exports.stzh_icon_sprite = StzhIconSprite;

package/dist/cjs/{stzh-input-description-9ed61d1d.js → stzh-input-description-9802abc2.js}

@@ -2,21 +2,21 @@
 
 const index = require('./index-ac9bdc7f.js');
 
-const StzhInputDescription = ({ id, classPrefix, error, description, descriptionLong, descriptionLongUsed, moreInfoButtonLabel }) => {
-  return (index.h("div", { class: `${classPrefix}__description-wrapper`, id: id },
-    index.h("div", { class: `${classPrefix}__error` }, error.length > 0 ?
-      index.h("ul", { class: `${classPrefix}__error-list` }, error.map((error) => index.h("li", { class: `${classPrefix}__error-listitem` }, error)))
-      :
-        index.h("slot", { name: "error" })),
-    index.h("div", { class: `${classPrefix}__description` },
-      index.h("div", { class: `${classPrefix}__description-text` }, description ? description : index.h("slot", { name: "description" })),
-      descriptionLongUsed &&
-        index.h("div", { class: `${classPrefix}__description-long` },
-          index.h("stzh-popover", { class: `${classPrefix}__description-long-popover`, variant: "tooltip" },
-            index.h("button", { class: `${classPrefix}__description-long-button`, "aria-label": moreInfoButtonLabel, type: "button" },
-              index.h("stzh-icon", { class: `${classPrefix}__description-long-icon`, name: "info-help" })),
-            index.h("div", { slot: "label" }, description ? description : index.h("slot", { name: "description" })),
-            index.h("div", { slot: "content" }, descriptionLong ? descriptionLong : index.h("slot", { name: "description-long" })))))));
+const StzhInputDescription = ({ id, classPrefix, error, description, descriptionLong, descriptionLongUsed, moreInfoButtonLabel }) => {
+  return (index.h("div", { class: `${classPrefix}__description-wrapper`, id: id },
+    index.h("div", { class: `${classPrefix}__error` }, error.length > 0 ?
+      index.h("ul", { class: `${classPrefix}__error-list` }, error.map((error) => index.h("li", { class: `${classPrefix}__error-listitem` }, error)))
+      :
+        index.h("slot", { name: "error" })),
+    index.h("div", { class: `${classPrefix}__description` },
+      index.h("div", { class: `${classPrefix}__description-text` }, description ? description : index.h("slot", { name: "description" })),
+      descriptionLongUsed &&
+        index.h("div", { class: `${classPrefix}__description-long` },
+          index.h("stzh-popover", { class: `${classPrefix}__description-long-popover`, variant: "tooltip" },
+            index.h("button", { class: `${classPrefix}__description-long-button`, "aria-label": moreInfoButtonLabel, type: "button" },
+              index.h("stzh-icon", { class: `${classPrefix}__description-long-icon`, name: "info-help" })),
+            index.h("div", { slot: "label" }, description ? description : index.h("slot", { name: "description" })),
+            index.h("div", { slot: "content" }, descriptionLong ? descriptionLong : index.h("slot", { name: "description-long" })))))));
 };
 
 exports.StzhInputDescription = StzhInputDescription;