@oiz/stzh-components 2.11.0-beta1 → 2.11.1

package/dist/components/stzh-header.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, readTask, writeTask, h, Host } from '@
 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:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}@-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%)}}@media print{.sc-stzh-header-h{display:none}}.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-left:1.25rem;margin-right: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-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right: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,.header__metabar-langnav.sc-stzh-header{display:none}@media screen and (min-width: 800px){.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.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(:empty){-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--stzh-space-small)}}@media screen and (min-width: 800px){.header__metabar-langnav.sc-stzh-header:not(:empty){margin-left:var(--stzh-space-medium)}}.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-left:1.25rem;margin-right:1.25rem}}@media screen and (min-width: 600px) and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 600px) and (min-width: 1024px){.header__appnav-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 600px) and (min-width: 1260px){.header__appnav-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 600px) and (min-width: 1440px){.header__appnav-inner.sc-stzh-header{margin-left:auto;margin-right: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-mobile.sc-stzh-header .header__metabar.sc-stzh-header{display:none}}.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-nav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .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)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar.sc-stzh-header{display:block;border-top:none;background-color:var(--stzh-color-grey5)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}@media screen and (max-width: 799px) and (min-width: 600px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (max-width: 799px) and (min-width: 1024px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (max-width: 799px) and (min-width: 1260px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (max-width: 799px) and (min-width: 1440px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (min-width: 800px){.header--sticky-metabar.sc-stzh-header:not(.header--sticky):not(.header--is-sticky-disabled) .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}@media screen and (min-width: 600px){.header--sticky.header--has-empty-metabar.sc-stzh-header:not(.header--has-appnav) .header__main.sc-stzh-header{border-bottom:none}}.header--sticky.sc-stzh-header .header__logobar.sc-stzh-header{display:none}@media screen and (max-width: 599px){.header--sticky.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@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)}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__main.sc-stzh-header{padding-top:4rem}}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__metabar.sc-stzh-header{position:absolute}}}";
+const stzhHeaderCss = ".sc-stzh-header-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}@-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%)}}@media print{.sc-stzh-header-h{display:none}}.sc-stzh-header-h .sc-stzh-header-s>[slot=logo]{width:auto;height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]{--width:auto;--height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--width:auto;--height:1.9375rem}@media screen and (min-width: 1024px){.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--height:2.1875rem}}@media screen and (min-width: 1440px){.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--height:3.3125rem}}.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-left:1.25rem;margin-right: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-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right: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,.header__metabar-langnav.sc-stzh-header{display:none}@media screen and (min-width: 800px){.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.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(:empty){-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--stzh-space-small)}}@media screen and (min-width: 800px){.header__metabar-langnav.sc-stzh-header:not(:empty){margin-left:var(--stzh-space-medium)}}.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-left:1.25rem;margin-right:1.25rem}}@media screen and (min-width: 600px) and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 600px) and (min-width: 1024px){.header__appnav-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 600px) and (min-width: 1260px){.header__appnav-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 600px) and (min-width: 1440px){.header__appnav-inner.sc-stzh-header{margin-left:auto;margin-right: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-mobile.sc-stzh-header .header__metabar.sc-stzh-header{display:none}}.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-nav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .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)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar.sc-stzh-header{display:block;border-top:none;background-color:var(--stzh-color-grey5)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}@media screen and (max-width: 799px) and (min-width: 600px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (max-width: 799px) and (min-width: 1024px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (max-width: 799px) and (min-width: 1260px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (max-width: 799px) and (min-width: 1440px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (min-width: 800px){.header--sticky-metabar.sc-stzh-header:not(.header--sticky):not(.header--is-sticky-disabled) .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}@media screen and (min-width: 600px){.header--sticky.header--has-empty-metabar.sc-stzh-header:not(.header--has-appnav) .header__main.sc-stzh-header{border-bottom:none}}.header--sticky.sc-stzh-header .header__logobar.sc-stzh-header{display:none}@media screen and (max-width: 599px){.header--sticky.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@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)}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__main.sc-stzh-header{padding-top:4rem}}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__metabar.sc-stzh-header{position:absolute}}}";
 
 const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends HTMLElement {
   constructor() {
@@ -91,7 +91,7 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
       return;
     }
     readTask(() => {
-      this.scrollTop = this.getScrollTop();
+      this.scrollTop = window.scrollY;
       this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
       this.lastScrollTop = this.scrollTop;
       this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;
@@ -112,9 +112,6 @@ const StzhHeader$1 = /*@__PURE__*/ proxyCustomElement(class StzhHeader extends H
       this.updatePosition();
     });
   }
-  getScrollTop() {
-    return window.pageYOffset || document.documentElement.scrollTop;
-  }
   updateMetabarPosition() {
     if (!this.metabarElement || this.stickyDisabled) {
       return;

package/dist/components/stzh-header.js.map

@@ -1 +1 @@
-{"file":"stzh-header.js","mappings":"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","names":["StzhHeader"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n  @media print {\n    display: none;\n  }\n\n  ::slotted(img[slot=\"logo\"]) {\n    width: auto;\n    height: 100%;\n  }\n\n  ::slotted(stzh-popover[slot=\"login\"]) {\n    display: flex;\n    flex-grow: 1;\n\n    .stzh-popover,\n    .stzh-popover__trigger {\n      display: flex;\n      flex-grow: 1;\n    }\n\n    .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n      @include fontSize('micro');\n      height: auto;\n\n      @include mq($to: smallheader) {\n        border-radius: 0;\n        height: 100%;\n      }\n\n      &__badge {\n        @include mq($to: smallheader) {\n          top: 8px;\n          right: 7px;\n        }\n      }\n    }\n  }\n}\n\n.header {\n  &__inner {\n    transition: box-shadow $baseTransitionAnimationSpeed;\n  }\n\n  &__main {\n    position: relative;\n    z-index: $zIndexHeader;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n    transition: box-shadow $baseTransitionAnimationSpeed;\n\n    @include mq($from: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n      padding-top: $headerMetabarHeightRegularUp;\n\n      @supports (position: sticky) {\n        padding-top: 0;\n      }\n    }\n  }\n\n  &__metabar {\n    border-top: 1px solid $baseBorderColor;\n\n    @include mq($from: smallheader) {\n      border-top: none;\n      background-color: $colorGrey5;\n      z-index: 1;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n\n      @supports (position: sticky) {\n        position: sticky;\n      }\n    }\n  }\n\n  &__metabar-inner {\n    @include container;\n    display: flex;\n    align-items: stretch;\n    height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n      // overwrite container margin for smallheader\n      // to be able to use fullwidth of metabar\n      margin: 0 auto;\n    }\n\n\t\t@include mq($from: smallheader) {\n      justify-content: flex-end;\n      align-items: center;\n      height: $headerMetabarHeightRegularUp;\n    }\n  }\n\n  &__metabar-nav,\n  &__metabar-langnav {\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &__metabar-login {\n    display: flex;\n    flex-basis: 50%;\n\n    &:not(:empty) {\n  \t\t@include mq($from: smallheader) {\n        flex-basis: auto;\n        margin-left: space('small');\n      }\n    }\n  }\n\n  &__metabar-langnav {\n    &:not(:empty) {\n      @include mq($from: smallheader) {\n        margin-left: space('medium');\n      }\n    }\n  }\n\n  &__logobar {\n    display: flex;\n    background-color: $colorPrimary;\n  }\n\n  &__logobar-logo {\n    box-sizing: content-box;\n    display: flex;\n    background-color: $colorWhite;\n    overflow: hidden;\n    width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n      width: 400px;\n    }\n\n\t\t@include mq($from: large) {\n\t\t  width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n  \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n  }\n\n  &__logo-link {\n    flex-grow: 1;\n    display: inline-flex;\n\t\theight: 76px;\n    padding: space('medium');\n    padding-left: $containerMargin;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n      padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n    }\n\n\t\t@include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  &__appnav {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: calc(#{$zIndexHeader} - 1);\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n\n    @include mq($from: small) {\n      position: static;\n      box-shadow: none;\n    }\n  }\n\n  &__appnav-inner {\n    @include mq($from: small) {\n      @include container;\n    }\n  }\n\n  /* Hide logo */\n\n  &--hide-logo &__logo-link {\n    opacity: 0;\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar-mobile &__metabar {\n    @include mq($to: smallheader) {\n      display: none;\n    }\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  /* Metabar Stay */\n\n  &--has-metabar-stay &__metabar-langnav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-nav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__main {\n    @include mq($to: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--has-metabar-stay &__metabar {\n    @include mq($to: smallheader) {\n      display: block;\n      border-top: none;\n      background-color: $colorGrey5;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-inner {\n    @include mq($to: smallheader) {\n      @include container;\n      justify-content: flex-end;\n      align-items: center;\n    }\n  }\n\n  /* Sticky metabar */\n\n  &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n    @include mq($from: smallheader) {\n      position: fixed;\n    }\n  }\n\n  /* Sticky variant */\n\n  &--sticky &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  &--sticky &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n    }\n\n\t\t@include mq($from: small) {\n      box-shadow: none;\n    }\n  }\n\n  &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--sticky &__metabar {\n    border-top: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n      border-bottom: none;\n    }\n  }\n\n  &--sticky &__logobar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  /* Sticky closing */\n\n  &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky disabled */\n\n  &--is-sticky-disabled &__main {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        padding-top: $headerMetabarHeightRegularUp;\n      }\n    }\n  }\n\n  &--is-sticky-disabled &__metabar {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        position: absolute;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = this.getScrollTop();\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private getScrollTop() {\n    return window.pageYOffset || document.documentElement.scrollTop;\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-header.js","mappings":"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","names":["StzhHeader"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n  @media print {\n    display: none;\n  }\n\n  ::slotted([slot=\"logo\"]) {\n    width: auto;\n    height: 100%;\n  }\n\n  ::slotted(stzh-logo[slot=\"logo\"]) {\n    --width: auto;\n    --height: 100%;\n  }\n\n  ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n    --width: auto;\n    --height: 31px;\n\n    @include mq($from: medium) {\n      --height: 35px;\n    }\n\n    @include mq($from: ultra) {\n      --height: 53px;\n    }\n  }\n\n  ::slotted(stzh-popover[slot=\"login\"]) {\n    display: flex;\n    flex-grow: 1;\n\n    .stzh-popover,\n    .stzh-popover__trigger {\n      display: flex;\n      flex-grow: 1;\n    }\n\n    .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n      @include fontSize('micro');\n      height: auto;\n\n      @include mq($to: smallheader) {\n        border-radius: 0;\n        height: 100%;\n      }\n\n      &__badge {\n        @include mq($to: smallheader) {\n          top: 8px;\n          right: 7px;\n        }\n      }\n    }\n  }\n}\n\n.header {\n  &__inner {\n    transition: box-shadow $baseTransitionAnimationSpeed;\n  }\n\n  &__main {\n    position: relative;\n    z-index: $zIndexHeader;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n    transition: box-shadow $baseTransitionAnimationSpeed;\n\n    @include mq($from: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n      padding-top: $headerMetabarHeightRegularUp;\n\n      @supports (position: sticky) {\n        padding-top: 0;\n      }\n    }\n  }\n\n  &__metabar {\n    border-top: 1px solid $baseBorderColor;\n\n    @include mq($from: smallheader) {\n      border-top: none;\n      background-color: $colorGrey5;\n      z-index: 1;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n\n      @supports (position: sticky) {\n        position: sticky;\n      }\n    }\n  }\n\n  &__metabar-inner {\n    @include container;\n    display: flex;\n    align-items: stretch;\n    height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n      // overwrite container margin for smallheader\n      // to be able to use fullwidth of metabar\n      margin: 0 auto;\n    }\n\n\t\t@include mq($from: smallheader) {\n      justify-content: flex-end;\n      align-items: center;\n      height: $headerMetabarHeightRegularUp;\n    }\n  }\n\n  &__metabar-nav,\n  &__metabar-langnav {\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &__metabar-login {\n    display: flex;\n    flex-basis: 50%;\n\n    &:not(:empty) {\n  \t\t@include mq($from: smallheader) {\n        flex-basis: auto;\n        margin-left: space('small');\n      }\n    }\n  }\n\n  &__metabar-langnav {\n    &:not(:empty) {\n      @include mq($from: smallheader) {\n        margin-left: space('medium');\n      }\n    }\n  }\n\n  &__logobar {\n    display: flex;\n    background-color: $colorPrimary;\n  }\n\n  &__logobar-logo {\n    box-sizing: content-box;\n    display: flex;\n    background-color: $colorWhite;\n    overflow: hidden;\n    width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n      width: 400px;\n    }\n\n\t\t@include mq($from: large) {\n\t\t  width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n  \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n  }\n\n  &__logo-link {\n    flex-grow: 1;\n    display: inline-flex;\n\t\theight: 76px;\n    padding: space('medium');\n    padding-left: $containerMargin;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n      padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n    }\n\n\t\t@include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  &__appnav {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: calc(#{$zIndexHeader} - 1);\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n\n    @include mq($from: small) {\n      position: static;\n      box-shadow: none;\n    }\n  }\n\n  &__appnav-inner {\n    @include mq($from: small) {\n      @include container;\n    }\n  }\n\n  /* Hide logo */\n\n  &--hide-logo &__logo-link {\n    opacity: 0;\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar-mobile &__metabar {\n    @include mq($to: smallheader) {\n      display: none;\n    }\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  /* Metabar Stay */\n\n  &--has-metabar-stay &__metabar-langnav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-nav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__main {\n    @include mq($to: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--has-metabar-stay &__metabar {\n    @include mq($to: smallheader) {\n      display: block;\n      border-top: none;\n      background-color: $colorGrey5;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-inner {\n    @include mq($to: smallheader) {\n      @include container;\n      justify-content: flex-end;\n      align-items: center;\n    }\n  }\n\n  /* Sticky metabar */\n\n  &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n    @include mq($from: smallheader) {\n      position: fixed;\n    }\n  }\n\n  /* Sticky variant */\n\n  &--sticky &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  &--sticky &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n    }\n\n\t\t@include mq($from: small) {\n      box-shadow: none;\n    }\n  }\n\n  &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--sticky &__metabar {\n    border-top: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n      border-bottom: none;\n    }\n  }\n\n  &--sticky &__logobar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  /* Sticky closing */\n\n  &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky disabled */\n\n  &--is-sticky-disabled &__main {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        padding-top: $headerMetabarHeightRegularUp;\n      }\n    }\n  }\n\n  &--is-sticky-disabled &__metabar {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        position: absolute;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = window.scrollY;\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-hspace.js

@@ -1,60 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const stzhHspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--h-space:var(--stzh-space-default);--h-around-left:0;--h-around-right:0;--h-around:0;display:-ms-flexbox;display:flex}:host ::slotted(*){max-width:100%;padding-left:calc(var(--h-space) * var(--h-around-left));padding-right:calc(var(--h-space) * var(--h-around-right));margin:0}:host ::slotted(*:not(:last-child)){margin-right:calc(var(--h-space) * (1 - var(--h-around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--h-around-left:1;--h-around-right:1;--h-around:1}:host(:empty){width:var(--h-space)}:host([around-left]:not([around-left=false])){--h-around-left:1;--h-around:1}:host([around-right]:not([around-right=false])){--h-around-right:1;--h-around:1}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--h-space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host([curve=tiny]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--h-space:var(--stzh-space-medium)}}:host([curve=small]){--h-space:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host([curve=small]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--h-space:var(--stzh-space-large)}}:host([curve=regular]){--h-space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host([curve=regular]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--h-space:var(--stzh-space-xlarge)}}:host([curve=medium]){--h-space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host([curve=medium]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--h-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--h-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([curve=large]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--h-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--h-space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=big]){--h-space:var(--stzh-space-xbig)}}:host([curve=huge]){--h-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([curve=huge]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--h-space:var(--stzh-space-huge)}}:host([size=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--h-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--h-space:var(--stzh-space-xsmall)}:host([size=small]){--h-space:var(--stzh-space-small)}:host([size=medium]){--h-space:var(--stzh-space-medium)}:host([size=large]){--h-space:var(--stzh-space-large)}:host([size=xlarge]){--h-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--h-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--h-space:var(--stzh-space-big)}:host([size=xbig]){--h-space:var(--stzh-space-xbig)}:host([size=huge]){--h-space:var(--stzh-space-huge)}:host([size=xhuge]){--h-space:var(--stzh-space-xhuge)}:host([size=none]){--h-space:var(--stzh-space-none)}:host([size=default]){--h-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){:host([size-medium=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--h-space:var(--stzh-space-default)}}.stzh-hspace{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%;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--border-left{border-left:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--border-right{border-right:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-hspace--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-hspace--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-hspace--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-hspace--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-hspace--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-hspace--items-center{-ms-flex-align:center;align-items:center}.stzh-hspace--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-hspace--items-stretch{-ms-flex-align:stretch;align-items:stretch}";
-
-const StzhHspace$1 = /*@__PURE__*/ proxyCustomElement(class StzhHspace extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
-    this.justify = "start";
-    this.items = "start";
-    this.around = false;
-    this.aroundLeft = false;
-    this.aroundRight = false;
-    this.border = "none";
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        "stzh-hspace": true,
-        [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
-        [`stzh-hspace--items-${this.items}`]: !!this.items
-      } }, h("slot", null))));
-  }
-  static get style() { return stzhHspaceCss; }
-}, [1, "stzh-hspace", {
-    "curve": [1],
-    "size": [1],
-    "sizeSmall": [1, "size-small"],
-    "sizeMedium": [1, "size-medium"],
-    "sizeLarge": [1, "size-large"],
-    "sizeUltra": [1, "size-ultra"],
-    "justify": [1],
-    "items": [1],
-    "around": [516],
-    "aroundLeft": [516, "around-left"],
-    "aroundRight": [516, "around-right"],
-    "border": [513]
-  }]);
-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;
-  } });
-}
+import { S as StzhHspace$1, d as defineCustomElement$1 } from './stzh-hspace2.js';
 
 const StzhHspace = StzhHspace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-hspace.js.map

@@ -1 +1 @@
-{"file":"stzh-hspace.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8+aAA8+a;;MCiBv/aA,YAAU;;;;;iBAES,MAAM;gBAGR,SAAS;qBAEJ,SAAS;sBAER,SAAS;qBAEV,SAAS;qBAET,SAAS;mBAGR,OAAO;iBAGX,OAAO;kBAGM,KAAK;sBAGD,KAAK;uBAGJ,KAAK;kBAGuB,MAAM;;EAElF,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OACnD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhHspace"],"sources":["src/components/stzh-hspace/stzh-hspace.scss?tag=stzh-hspace&encapsulation=shadow","src/components/stzh-hspace/stzh-hspace.tsx"],"sourcesContent":[":host {\n  --h-space: #{space()};\n  --h-around-left: 0;\n  --h-around-right: 0;\n  --h-around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding-left: calc(var(--h-space) * var(--h-around-left));\n    padding-right: calc(var(--h-space) * var(--h-around-right));\n    margin: 0;\n  }\n\n  ::slotted(*:not(:last-child)) {\n    margin-right: calc(var(--h-space) * (1 - var(--h-around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n  --h-around-left: 1;\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n:host(:empty) {\n  width: var(--h-space);\n}\n\n:host([around-left]:not([around-left=\"false\"])) {\n  --h-around-left: 1;\n  --h-around: 1;\n}\n\n:host([around-right]:not([around-right=\"false\"])) {\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space variants */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-h-space {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --h-space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --h-space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-h-space {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --h-space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-h-space {\n      :host([size=\"#{$space}\"]) {\n        --h-space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-hspace {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n\n  &--border-left {\n    border-left: 1px solid $baseBorderColor;\n  }\n\n  &--border-right {\n    border-right: 1px solid $baseBorderColor;\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be horizontically spaced\n */\n@Component({\n  tag: \"stzh-hspace\",\n  styleUrl: \"stzh-hspace.scss\",\n  shadow: true\n})\nexport class StzhHspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n  /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only left) */\n  @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only right) */\n  @Prop({ reflect: true }) aroundRight: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"left\" | \"right\" | \"left-right\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-hspace\": true,\n            [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-hspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-hspace.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{esm/stzh-hspace.entry.js → components/stzh-hspace2.js}

@@ -1,16 +1,18 @@
-import { r as registerInstance, h, a as Host } from './index-bfb5b569.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const stzhHspaceCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--h-space:var(--stzh-space-default);--h-around-left:0;--h-around-right:0;--h-around:0;display:-ms-flexbox;display:flex}:host ::slotted(*){max-width:100%;padding-left:calc(var(--h-space) * var(--h-around-left));padding-right:calc(var(--h-space) * var(--h-around-right));margin:0}:host ::slotted(*:not(:last-child)){margin-right:calc(var(--h-space) * (1 - var(--h-around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--h-around-left:1;--h-around-right:1;--h-around:1}:host(:empty){width:var(--h-space)}:host([around-left]:not([around-left=false])){--h-around-left:1;--h-around:1}:host([around-right]:not([around-right=false])){--h-around-right:1;--h-around:1}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--h-space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host([curve=tiny]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--h-space:var(--stzh-space-medium)}}:host([curve=small]){--h-space:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host([curve=small]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--h-space:var(--stzh-space-large)}}:host([curve=regular]){--h-space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host([curve=regular]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--h-space:var(--stzh-space-xlarge)}}:host([curve=medium]){--h-space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host([curve=medium]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--h-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--h-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([curve=large]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--h-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--h-space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=big]){--h-space:var(--stzh-space-xbig)}}:host([curve=huge]){--h-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([curve=huge]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--h-space:var(--stzh-space-huge)}}:host([size=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--h-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--h-space:var(--stzh-space-xsmall)}:host([size=small]){--h-space:var(--stzh-space-small)}:host([size=medium]){--h-space:var(--stzh-space-medium)}:host([size=large]){--h-space:var(--stzh-space-large)}:host([size=xlarge]){--h-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--h-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--h-space:var(--stzh-space-big)}:host([size=xbig]){--h-space:var(--stzh-space-xbig)}:host([size=huge]){--h-space:var(--stzh-space-huge)}:host([size=xhuge]){--h-space:var(--stzh-space-xhuge)}:host([size=none]){--h-space:var(--stzh-space-none)}:host([size=default]){--h-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){:host([size-medium=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--h-space:var(--stzh-space-default)}}.stzh-hspace{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%;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--border-left{border-left:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--border-right{border-right:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-hspace--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-hspace--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-hspace--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-hspace--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-hspace--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-hspace--items-center{-ms-flex-align:center;align-items:center}.stzh-hspace--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-hspace--items-stretch{-ms-flex-align:stretch;align-items:stretch}";
 
-const StzhHspace = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const StzhHspace = /*@__PURE__*/ proxyCustomElement(class StzhHspace extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
+    this.size = undefined;
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.around = false;
@@ -25,9 +27,35 @@ const StzhHspace = class {
         [`stzh-hspace--items-${this.items}`]: !!this.items
       } }, h("slot", null))));
   }
-};
-StzhHspace.style = stzhHspaceCss;
+  static get style() { return stzhHspaceCss; }
+}, [1, "stzh-hspace", {
+    "curve": [513],
+    "size": [513],
+    "sizeSmall": [513, "size-small"],
+    "sizeMedium": [513, "size-medium"],
+    "sizeLarge": [513, "size-large"],
+    "sizeUltra": [513, "size-ultra"],
+    "justify": [513],
+    "items": [513],
+    "around": [516],
+    "aroundLeft": [516, "around-left"],
+    "aroundRight": [516, "around-right"],
+    "border": [513]
+  }]);
+function defineCustomElement() {
+  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);
+      }
+      break;
+  } });
+}
 
-export { StzhHspace as stzh_hspace };
+export { StzhHspace as S, defineCustomElement as d };
 
-//# sourceMappingURL=stzh-hspace.entry.js.map
+//# sourceMappingURL=stzh-hspace2.js.map

package/dist/components/stzh-hspace2.js.map

@@ -0,0 +1 @@
+{"file":"stzh-hspace2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8+aAA8+a;;MCiBv/a,UAAU;;;;;iBAE0B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;sBAGD,KAAK;uBAGJ,KAAK;kBAGuB,MAAM;;EAElF,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,CAAC,wBAAwB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACxD,CAAC,sBAAsB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OACnD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-hspace/stzh-hspace.scss?tag=stzh-hspace&encapsulation=shadow","src/components/stzh-hspace/stzh-hspace.tsx"],"sourcesContent":[":host {\n  --h-space: #{space()};\n  --h-around-left: 0;\n  --h-around-right: 0;\n  --h-around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding-left: calc(var(--h-space) * var(--h-around-left));\n    padding-right: calc(var(--h-space) * var(--h-around-right));\n    margin: 0;\n  }\n\n  ::slotted(*:not(:last-child)) {\n    margin-right: calc(var(--h-space) * (1 - var(--h-around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n  --h-around-left: 1;\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n:host(:empty) {\n  width: var(--h-space);\n}\n\n:host([around-left]:not([around-left=\"false\"])) {\n  --h-around-left: 1;\n  --h-around: 1;\n}\n\n:host([around-right]:not([around-right=\"false\"])) {\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space variants */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-h-space {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --h-space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --h-space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-h-space {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --h-space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-h-space {\n      :host([size=\"#{$space}\"]) {\n        --h-space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-hspace {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n\n  &--border-left {\n    border-left: 1px solid $baseBorderColor;\n  }\n\n  &--border-right {\n    border-right: 1px solid $baseBorderColor;\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be horizontically spaced\n */\n@Component({\n  tag: \"stzh-hspace\",\n  styleUrl: \"stzh-hspace.scss\",\n  shadow: true\n})\nexport class StzhHspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only left) */\n  @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only right) */\n  @Prop({ reflect: true }) aroundRight: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"left\" | \"right\" | \"left-right\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-hspace\": true,\n            [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-hspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-imagecomparison.js

@@ -20,8 +20,6 @@ const StzhImageComparison = /*@__PURE__*/ proxyCustomElement(class StzhImageComp
     this.localization = undefined;
     this.hintLeft = "";
     this.hintRight = "";
-    this.caption = "";
-    this.copyright = "";
     this.value = 50;
     this.label = undefined;
     this.a11yDescribedby = "";
@@ -45,8 +43,6 @@ const StzhImageComparison = /*@__PURE__*/ proxyCustomElement(class StzhImageComp
     "localization": [16],
     "hintLeft": [1, "hint-left"],
     "hintRight": [1, "hint-right"],
-    "caption": [1],
-    "copyright": [1],
     "value": [1026],
     "label": [1],
     "a11yDescribedby": [1, "a11y-describedby"]

package/dist/components/stzh-imagecomparison.js.map

@@ -1 +1 @@
-{"file":"stzh-imagecomparison.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,8tJAA8tJ;;MC6BhvJ,mBAAmB;;;;;IAgCtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBApC0B,EAAE;qBAGD,EAAE;mBAGJ,EAAE;qBAGA,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,mCAAmC,GAAO,EACrD,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EAEN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 40px;\n    height: 40px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack48;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"stzh-imagecomparison.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,8tJAA8tJ;;MC6BhvJ,mBAAmB;;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,mCAAmC,GAAO,EACrD,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EAEN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 40px;\n    height: 40px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack48;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

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