@oiz/stzh-components 4.12.1 → 4.12.2

package/dist/components/{p-CLg_b_CM.js → p-Bg2ganSs.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
 
 const stzhHeadingCss = () => `.sc-stzh-heading-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-heading-h,[stzh-hidden].sc-stzh-heading-h{display:none}.sc-stzh-heading-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-heading-h *.sc-stzh-heading,.sc-stzh-heading-h *.sc-stzh-heading::before,.sc-stzh-heading-h *.sc-stzh-heading::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-heading-h .has-focus.sc-stzh-heading{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading{outline-style:none !important}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading::-moz-focus-inner{border:0 !important}.sc-stzh-heading-h{width:100%;--color:var(--stzh-heading-color);color:var(--color)}.sc-stzh-heading-h.sc-stzh-heading-s>a,.sc-stzh-heading-h .sc-stzh-heading-s>a,.sc-stzh-heading-h .sc-stzh-heading-s a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-heading-h.sc-stzh-heading-s>a,.sc-stzh-heading-h.sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-s a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.sc-stzh-heading-h.sc-stzh-heading-s>a,.sc-stzh-heading-h.sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-s a:hover{color:var(--stzh-link-hover-color)}.stzh-heading.sc-stzh-heading{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading.sc-stzh-heading{color:var(--color);margin:0}.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-heading-line-height, var(--stzh-font-nano-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-default-heading-letter-spacing, var(--stzh-font-nano-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-medium-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}}.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-default-heading-letter-spacing)}@media screen and (min-width: 1260px){.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-large-heading-letter-spacing)}}.stzh-heading--curve-teaser.sc-stzh-heading{font-size:var(--stzh-font-curve-teaser-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-teaser-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-teaser-default-heading-letter-spacing)}@media screen and (min-width: 1260px){.stzh-heading--curve-teaser.sc-stzh-heading{font-size:var(--stzh-font-curve-teaser-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-teaser-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-teaser-large-heading-letter-spacing)}}.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-default-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-heading-letter-spacing)}}.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-default-heading-letter-spacing)}@media screen and (min-width: 900px){.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-heading-letter-spacing)}}.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-heading-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-heading-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-heading--curve-h1home.sc-stzh-heading{font-size:var(--stzh-font-curve-h1home-default-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1home-default-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-default-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1home.sc-stzh-heading{font-size:var(--stzh-font-curve-h1home-small-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1home-small-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-small-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h1home.sc-stzh-heading{font-size:var(--stzh-font-curve-h1home-medium-font-size, var(--stzh-font-peta-font-size));line-height:var(--stzh-font-curve-h1home-medium-heading-line-height, var(--stzh-font-peta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-medium-heading-letter-spacing, var(--stzh-font-peta-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-h1home.sc-stzh-heading{font-size:var(--stzh-font-curve-h1home-large-font-size, var(--stzh-font-exa-font-size));line-height:var(--stzh-font-curve-h1home-large-heading-line-height, var(--stzh-font-exa-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-large-heading-letter-spacing, var(--stzh-font-exa-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h1home.sc-stzh-heading{font-size:var(--stzh-font-curve-h1home-ultra-font-size, var(--stzh-font-zetta-font-size));line-height:var(--stzh-font-curve-h1home-ultra-heading-line-height, var(--stzh-font-zetta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-ultra-heading-letter-spacing, var(--stzh-font-zetta-text-letter-spacing))}}.stzh-heading--curve-h1homesmall.sc-stzh-heading{font-size:var(--stzh-font-curve-h1homesmall-default-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1homesmall-default-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1homesmall-default-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1homesmall.sc-stzh-heading{font-size:var(--stzh-font-curve-h1homesmall-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1homesmall-small-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1homesmall-small-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h1homesmall.sc-stzh-heading{font-size:var(--stzh-font-curve-h1homesmall-medium-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1homesmall-medium-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1homesmall-medium-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-h1homesmall.sc-stzh-heading{font-size:var(--stzh-font-curve-h1homesmall-large-font-size, var(--stzh-font-peta-font-size));line-height:var(--stzh-font-curve-h1homesmall-large-heading-line-height, var(--stzh-font-peta-text-line-height));letter-spacing:var(--stzh-font-curve-h1homesmall-large-heading-letter-spacing, var(--stzh-font-peta-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h1homesmall.sc-stzh-heading{font-size:var(--stzh-font-curve-h1homesmall-ultra-font-size, var(--stzh-font-peta-font-size));line-height:var(--stzh-font-curve-h1homesmall-ultra-heading-line-height, var(--stzh-font-peta-text-line-height));letter-spacing:var(--stzh-font-curve-h1homesmall-ultra-heading-letter-spacing, var(--stzh-font-peta-text-letter-spacing))}}`;
 
@@ -55,6 +55,6 @@ function defineCustomElement() {
 }
 
 export { StzhHeading as S, defineCustomElement as d };
-//# sourceMappingURL=p-CLg_b_CM.js.map
+//# sourceMappingURL=p-Bg2ganSs.js.map
 
-//# sourceMappingURL=p-CLg_b_CM.js.map
+//# sourceMappingURL=p-Bg2ganSs.js.map

package/dist/components/{p-CLg_b_CM.js.map → p-Bg2ganSs.js.map}

@@ -1 +1 @@
-{"file":"p-CLg_b_CM.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,8rxBAA8rxB,CAAC;;MCYhtxB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAA0B,GAAG;;AAGlC,QAAA,IAAK,CAAA,KAAA,GAAyB,MAAM;AAIrD,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AA4BlC;AAzBC,IAAA,kBAAkB,CAAC,QAAgB,EAAA;AACjC,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG3C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,EAAE;AAChC,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;YACpB,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YACnD,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SACpD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAA,CAAQ,CACvD,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/**\n * @prop --color: Color of heading\n *\n * @prop --stzh-heading-color: **Global**: Color of heading\n */\n\n:host {\n  width: 100%;\n\n  --color: #{$headingColor};\n  color: var(--color);\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n}\n\n.stzh-heading {\n  @include font(\"title\");\n  @include fontCurve(\"h2\", \"heading\"); // default\n  color: var(--color);\n  margin: 0;\n\n  @for $i from 1 through 4 {\n    &--level-#{$i} {\n      @include fontCurve(\"h\" + $i, \"heading\");\n    }\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName, \"heading\");\n    }\n  }\n}\n","import { Component, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Text content\n */\n@Component({\n  tag: \"stzh-heading\",\n  styleUrl: \"stzh-heading.scss\",\n  scoped: true,\n})\nexport class StzhHeading {\n  /** Heading level */\n  @Prop({ reflect: true }) level: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves | \"auto\" = \"auto\";\n\n  /* HTML content (since innerHTML won't work when it's being changed after initial render) */\n  @Prop() htmlContent: string;\n  private _htmlContent: string = \"\";\n\n  @Watch(\"htmlContent\")\n  htmlContentWatcher(newValue: string) {\n    this._htmlContent = newValue;\n  }\n\n  componentWillLoad() {\n    this.htmlContentWatcher(this.htmlContent);\n  }\n\n  render() {\n    const Heading = `h${this.level}`;\n    const classes = {\n      \"stzh-heading\": true,\n      [`stzh-heading--level-${this.level}`]: !!this.level,\n      [`stzh-heading--curve-${this.curve}`]: !!this.curve,\n    };\n\n    return (\n      <Host>\n        <Heading class={classes}>\n          <slot></slot>\n          {this._htmlContent && <div innerHTML={this._htmlContent}></div>}\n        </Heading>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Bg2ganSs.js","mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,8rxBAA8rxB,CAAC;;MCYhtxB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAA0B,GAAG;;AAGlC,QAAA,IAAK,CAAA,KAAA,GAAyB,MAAM;AAIrD,QAAA,IAAY,CAAA,YAAA,GAAW,EAAE;AA4BlC;AAzBC,IAAA,kBAAkB,CAAC,QAAgB,EAAA;AACjC,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG9B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG3C,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,EAAE;AAChC,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;YACpB,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YACnD,CAAC,CAAA,oBAAA,EAAuB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SACpD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,OAAO,EAAA,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACZ,IAAI,CAAC,YAAY,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,SAAS,EAAE,IAAI,CAAC,YAAY,EAAA,CAAQ,CACvD,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/**\n * @prop --color: Color of heading\n *\n * @prop --stzh-heading-color: **Global**: Color of heading\n */\n\n:host {\n  width: 100%;\n\n  --color: #{$headingColor};\n  color: var(--color);\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n    }\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n}\n\n.stzh-heading {\n  @include font(\"title\");\n  @include fontCurve(\"h2\", \"heading\"); // default\n  color: var(--color);\n  margin: 0;\n\n  @for $i from 1 through 4 {\n    &--level-#{$i} {\n      @include fontCurve(\"h\" + $i, \"heading\");\n    }\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName, \"heading\");\n    }\n  }\n}\n","import { Component, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Text content\n */\n@Component({\n  tag: \"stzh-heading\",\n  styleUrl: \"stzh-heading.scss\",\n  scoped: true,\n})\nexport class StzhHeading {\n  /** Heading level */\n  @Prop({ reflect: true }) level: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves | \"auto\" = \"auto\";\n\n  /* HTML content (since innerHTML won't work when it's being changed after initial render) */\n  @Prop() htmlContent: string;\n  private _htmlContent: string = \"\";\n\n  @Watch(\"htmlContent\")\n  htmlContentWatcher(newValue: string) {\n    this._htmlContent = newValue;\n  }\n\n  componentWillLoad() {\n    this.htmlContentWatcher(this.htmlContent);\n  }\n\n  render() {\n    const Heading = `h${this.level}`;\n    const classes = {\n      \"stzh-heading\": true,\n      [`stzh-heading--level-${this.level}`]: !!this.level,\n      [`stzh-heading--curve-${this.curve}`]: !!this.curve,\n    };\n\n    return (\n      <Host>\n        <Heading class={classes}>\n          <slot></slot>\n          {this._htmlContent && <div innerHTML={this._htmlContent}></div>}\n        </Heading>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ts8WMMWF.js → p-BiFb4c_S.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { d as defineCustomElement$3 } from './p-Yktwo3G-.js';
-import { d as defineCustomElement$2 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$1 } from './p-D1qHu5Qi.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { d as defineCustomElement$3 } from './p-DEfzwFSm.js';
+import { d as defineCustomElement$2 } from './p-CRo_30JG.js';
+import { d as defineCustomElement$1 } from './p-DrLVNdlm.js';
 
 const stzhClampCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-clamp{}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{--current-lines:var(--lines, 0);--trigger-color:var(--stzh-clamp-trigger-color, var(--stzh-link-color));--trigger-color-hover:var(
     --stzh-clamp-trigger-color-hover,
@@ -169,6 +169,6 @@ function defineCustomElement() {
 }
 
 export { StzhClamp as S, defineCustomElement as d };
-//# sourceMappingURL=p-ts8WMMWF.js.map
+//# sourceMappingURL=p-BiFb4c_S.js.map
 
-//# sourceMappingURL=p-ts8WMMWF.js.map
+//# sourceMappingURL=p-BiFb4c_S.js.map

package/dist/components/{p-ts8WMMWF.js.map → p-BiFb4c_S.js.map}

@@ -1 +1 @@
-{"file":"p-ts8WMMWF.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n  --trigger-color: var(--stzh-clamp-trigger-color, #{$linkColor});\n  --trigger-color-hover: var(\n    --stzh-clamp-trigger-color-hover,\n    #{$linkHoverColor}\n  );\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    --stzh-link-color: var(--trigger-color);\n    --stzh-link-hover-color: var(--trigger-color-hover);\n\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent, StzhLinkSize } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Expand link Size variant */\n  @Prop({ reflect: true }) expandLinkSize: StzhLinkSize = \"default\";\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              size={this.expandLinkSize}\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BiFb4c_S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/**\n * @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n */\n\nstzh-clamp {\n  @include host;\n  --current-lines: var(--lines, 0);\n  --trigger-color: var(--stzh-clamp-trigger-color, #{$linkColor});\n  --trigger-color-hover: var(\n    --stzh-clamp-trigger-color-hover,\n    #{$linkHoverColor}\n  );\n\n  @include mq($from: small) {\n    --current-lines: var(--lines-small, var(--lines, 0));\n  }\n\n  @include mq($from: medium) {\n    --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n  }\n\n  @include mq($from: large) {\n    --current-lines: var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    );\n  }\n\n  @include mq($from: ultra) {\n    --current-lines: var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    );\n  }\n\n  width: 100%;\n  color: inherit;\n  font-family: inherit;\n  font-weight: inherit;\n  font-style: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.stzh-clamp {\n  position: relative;\n\n  &__text {\n    @include wordWrap;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n\n    & > *:first-child {\n      margin-top: 0 !important;\n    }\n\n    & > *:last-child {\n      margin-bottom: 0 !important;\n    }\n\n    &.is-clone {\n      position: absolute;\n      visibility: hidden;\n      opacity: 0;\n      top: 0;\n      left: 0;\n      width: 100%;\n    }\n  }\n\n  &__trigger {\n    --stzh-link-color: var(--trigger-color);\n    --stzh-link-hover-color: var(--trigger-color-hover);\n\n    @include mq($from: medium) {\n      margin-top: space(\"xxsmall\");\n    }\n  }\n\n  &--is-not-expanded &__text,\n  &__text.is-clone {\n    -webkit-line-clamp: var(--current-lines);\n    line-clamp: var(--current-lines);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent, StzhLinkSize } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/**\n * @slot - Slot for clamp text\n */\n@Component({\n  tag: \"stzh-clamp\",\n  styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n  /** Translation strings */\n  @Prop() localization: StzhClampLocalizedText;\n\n  /** Line number */\n  @Prop() lines: number = 1;\n  /** Line number above small breakpoint */\n  @Prop() linesSmall: number = 0;\n  /** Line number above medium breakpoint */\n  @Prop() linesMedium: number = 0;\n  /** Line number above large breakpoint */\n  @Prop() linesLarge: number = 0;\n  /** Line number above ultra breakpoint */\n  @Prop() linesUltra: number = 0;\n\n  /** Whether expand link is shown */\n  @Prop() showExpandLink: boolean = false;\n\n  /** Expand link Size variant */\n  @Prop({ reflect: true }) expandLinkSize: StzhLinkSize = \"default\";\n\n  /** Whether clamping is expanded */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /** Whether the text is currently clamped (readonly) */\n  @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n  @Element() element: HTMLStzhClampElement;\n\n  /** Event when clamping state changed */\n  @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n  /** Event when expanding state changed */\n  @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n  @Method()\n  async update() {\n    this.textCloneElement.innerHTML = this.textElement.innerHTML;\n    this.updateClamped();\n  }\n\n  private textElement: HTMLElement;\n  private textCloneElement: HTMLElement;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private updateClamped = () => {\n    if (!this.textCloneElement) {\n      return;\n    }\n\n    const beforeClamped = this.clamped;\n    this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n    if (beforeClamped !== this.clamped) {\n      this.stzhClamp.emit({\n        component: \"stzh-clamp\",\n        clamped: this.clamped,\n      });\n    }\n  };\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateClamped);\n  };\n\n  private handleMutaton = () => {\n    this.update();\n  };\n\n  private handleExpandClick = async () => {\n    this.expanded = !this.expanded;\n    await this.waitForNextRender();\n\n    this.stzhExpand.emit({\n      component: \"stzh-clamp\",\n      expanded: this.expanded,\n    });\n  };\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(this.handleMutaton);\n    this.mutationObserver.observe(this.textElement, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    this.update();\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-clamp\": true,\n      \"stzh-clamp--is-not-expanded\": !this.expanded,\n    };\n\n    return (\n      <Host\n        style={{\n          \"--lines\": this.lines ? this.lines.toString() : null,\n          \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n          \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n          \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n          \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n            <slot></slot>\n          </div>\n\n          <div\n            ref={el => (this.textCloneElement = el as HTMLDivElement)}\n            class=\"stzh-clamp__text is-clone rs_skip\"\n            aria-hidden=\"true\"\n          ></div>\n\n          {this.showExpandLink && this.clamped && (\n            <stzh-link\n              class=\"stzh-clamp__trigger\"\n              size={this.expandLinkSize}\n              a11yTabindex=\"-1\"\n              aria-hidden=\"true\"\n              onClick={this.handleExpandClick}\n            >\n              {!this.expanded ? this.localization.showMore : this.localization.showLess}\n            </stzh-link>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DX8rme7W.js → p-BiZ4OWbq.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
 
 const stzhCellCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);flex-basis:var(--cell-width);flex-shrink:0}:host([align=left]){margin-right:auto}:host([align=right]){margin-left:auto}:host([align=middle]){margin-left:auto;margin-right:auto}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=center]){align-self:center}:host([align-self=baseline]){align-self:baseline}:host([align-self=stretch]){align-self:stretch}:host([span="1"]){--cell-width:8.3333333333%}:host([span="2"]){--cell-width:16.6666666667%}:host([span="3"]){--cell-width:25%}:host([span="4"]){--cell-width:33.3333333333%}:host([span="5"]){--cell-width:41.6666666667%}:host([span="6"]){--cell-width:50%}:host([span="7"]){--cell-width:58.3333333333%}:host([span="8"]){--cell-width:66.6666666667%}:host([span="9"]){--cell-width:75%}:host([span="10"]){--cell-width:83.3333333333%}:host([span="11"]){--cell-width:91.6666666667%}:host([span="12"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="3"]){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="6"]){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="9"]){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="12"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="3"]){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="6"]){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="9"]){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="12"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 900px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}@media screen and (min-width: 1260px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-large) / 2);padding-right:calc(var(--stzh-grid-gutter-large) / 2)}}@media screen and (min-width: 1600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-ultra) / 2);padding-right:calc(var(--stzh-grid-gutter-ultra) / 2)}}`;
 
@@ -44,6 +44,6 @@ function defineCustomElement() {
 }
 
 export { StzhCell as S, defineCustomElement as d };
-//# sourceMappingURL=p-DX8rme7W.js.map
+//# sourceMappingURL=p-BiZ4OWbq.js.map
 
-//# sourceMappingURL=p-DX8rme7W.js.map
+//# sourceMappingURL=p-BiZ4OWbq.js.map

package/dist/components/{p-DX8rme7W.js.map → p-BiZ4OWbq.js.map}

@@ -1 +1 @@
-{"file":"p-DX8rme7W.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BiZ4OWbq.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,srNAAsrN,CAAC;;MCYrsN,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAK,CAAA,KAAA,GAAyC,MAAM;;AAGpD,QAAA,IAAS,CAAA,SAAA,GAAqB,MAAM;AAe9D;IAbC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AAClB,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-x2lzAuxg.js → p-BmG3hFM8.js}

@@ -1,10 +1,10 @@
-import { h } from './p-5QD-jnDI.js';
+import { h } from './p-BBg6OWDc.js';
 
 const StzhInputDescription = ({ id, classPrefix, error, description, descriptionLong, descriptionLongTitle, descriptionLongUsed, moreInfoButtonLabel, showError = true, showDescriptionText = true, }) => {
     return (h("div", { class: `${classPrefix}__description-wrapper`, id: id }, showError && (h("div", { class: `${classPrefix}__error` }, (error === null || error === void 0 ? void 0 : error.length) > 0 ? (h("ul", { class: `${classPrefix}__error-list` }, error.map(error => (h("li", { class: `${classPrefix}__error-listitem` }, error))))) : (h("slot", { name: "error" })))), (descriptionLongUsed || showDescriptionText) && (h("div", { class: `${classPrefix}__description` }, descriptionLongUsed && (h("div", { class: `${classPrefix}__description-long` }, h("stzh-popover", { class: `${classPrefix}__description-long-popover`, variant: "tooltip" }, h("button", { class: `${classPrefix}__description-long-button`, "aria-label": moreInfoButtonLabel, type: "button", "s-object-id": moreInfoButtonLabel }, h("stzh-icon", { class: `${classPrefix}__description-long-icon`, name: "info-help-filled" })), h("div", { slot: "label" }, descriptionLongTitle || description ? (descriptionLongTitle || description) : (h("slot", { name: "description-long-title" }))), h("stzh-text", { curve: "none", slot: "content" }, descriptionLong ? descriptionLong : h("slot", { name: "description-long" }))))), showDescriptionText && (h("div", { class: `${classPrefix}__description-text` }, description ? description : h("slot", { name: "description" })))))));
 };
 
 export { StzhInputDescription as S };
-//# sourceMappingURL=p-x2lzAuxg.js.map
+//# sourceMappingURL=p-BmG3hFM8.js.map
 
-//# sourceMappingURL=p-x2lzAuxg.js.map
+//# sourceMappingURL=p-BmG3hFM8.js.map

package/dist/components/{p-x2lzAuxg.js.map → p-BmG3hFM8.js.map}

@@ -1 +1 @@
-{"file":"p-x2lzAuxg.js","mappings":";;AAeO,MAAM,oBAAoB,GAAmD,CAAC,EACnF,EAAE,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,GAAG,IAAI,EAChB,mBAAmB,GAAG,IAAI,GAC3B,KAAI;AACH,IAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,uBAAuB,EAAE,EAAE,EAAE,EAAE,EAAA,EACtD,SAAS,KACR,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,OAAA,CAAS,EAChC,EAAA,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,IAAG,CAAC,IAChB,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAG,EAAA,WAAW,CAAc,YAAA,CAAA,EACpC,EAAA,KAAK,CAAC,GAAG,CAAC,KAAK,KACd,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,CAAkB,gBAAA,CAAA,IAAG,KAAK,CAAM,CAC1D,CAAC,CACC,KAEL,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CAC3B,CACG,CACP,EAEA,CAAC,mBAAmB,IAAI,mBAAmB,MAC1C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,eAAe,EAAA,EACtC,mBAAmB,KAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,oBAAoB,EAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAA4B,0BAAA,CAAA,EAAE,OAAO,EAAC,SAAS,EAAA,EAChF,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,GAAG,WAAW,CAAA,yBAAA,CAA2B,EAAA,YAAA,EACpC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,mBAAmB,EAAA,EAEhC,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAyB,uBAAA,CAAA,EAAE,IAAI,EAAC,kBAAkB,EAAA,CAAa,CACxF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACd,EAAA,oBAAoB,IAAI,WAAW,IAClC,oBAAoB,IAAI,WAAW,KAEnC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,wBAAwB,EAAQ,CAAA,CAC5C,CACG,EACN,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAA,EACnC,eAAe,GAAG,eAAe,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,kBAAkB,EAAQ,CAAA,CAChE,CACC,CACX,CACP,EACA,mBAAmB,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,oBAAoB,EAC3C,EAAA,WAAW,GAAG,WAAW,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CACzD,CACP,CACG,CACP,CACG;AAEV;;;;","names":[],"sources":["src/components/stzh-input/stzh-input-description.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\n\nexport type StzhInputDescriptionProps = {\n  id: string;\n  classPrefix: string;\n  error?: string[];\n  description?: string;\n  descriptionLong?: string;\n  descriptionLongTitle?: string;\n  descriptionLongUsed?: boolean;\n  moreInfoButtonLabel?: string;\n  showError?: boolean;\n  showDescriptionText?: boolean;\n};\n\nexport const StzhInputDescription: FunctionalComponent<StzhInputDescriptionProps> = ({\n  id,\n  classPrefix,\n  error,\n  description,\n  descriptionLong,\n  descriptionLongTitle,\n  descriptionLongUsed,\n  moreInfoButtonLabel,\n  showError = true,\n  showDescriptionText = true,\n}) => {\n  return (\n    <div class={`${classPrefix}__description-wrapper`} id={id}>\n      {showError && (\n        <div class={`${classPrefix}__error`}>\n          {error?.length > 0 ? (\n            <ul class={`${classPrefix}__error-list`}>\n              {error.map(error => (\n                <li class={`${classPrefix}__error-listitem`}>{error}</li>\n              ))}\n            </ul>\n          ) : (\n            <slot name=\"error\"></slot>\n          )}\n        </div>\n      )}\n\n      {(descriptionLongUsed || showDescriptionText) && (\n        <div class={`${classPrefix}__description`}>\n          {descriptionLongUsed && (\n            <div class={`${classPrefix}__description-long`}>\n              <stzh-popover class={`${classPrefix}__description-long-popover`} variant=\"tooltip\">\n                <button\n                  class={`${classPrefix}__description-long-button`}\n                  aria-label={moreInfoButtonLabel}\n                  type=\"button\"\n                  s-object-id={moreInfoButtonLabel}\n                >\n                  <stzh-icon class={`${classPrefix}__description-long-icon`} name=\"info-help-filled\"></stzh-icon>\n                </button>\n                <div slot=\"label\">\n                  {descriptionLongTitle || description ? (\n                    descriptionLongTitle || description\n                  ) : (\n                    <slot name=\"description-long-title\"></slot>\n                  )}\n                </div>\n                <stzh-text curve=\"none\" slot=\"content\">\n                  {descriptionLong ? descriptionLong : <slot name=\"description-long\"></slot>}\n                </stzh-text>\n              </stzh-popover>\n            </div>\n          )}\n          {showDescriptionText && (\n            <div class={`${classPrefix}__description-text`}>\n              {description ? description : <slot name=\"description\"></slot>}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"version":3}
+{"file":"p-BmG3hFM8.js","mappings":";;AAeO,MAAM,oBAAoB,GAAmD,CAAC,EACnF,EAAE,EACF,WAAW,EACX,KAAK,EACL,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,GAAG,IAAI,EAChB,mBAAmB,GAAG,IAAI,GAC3B,KAAI;AACH,IAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,uBAAuB,EAAE,EAAE,EAAE,EAAE,EAAA,EACtD,SAAS,KACR,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAA,OAAA,CAAS,EAChC,EAAA,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,IAAG,CAAC,IAChB,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAG,EAAA,WAAW,CAAc,YAAA,CAAA,EACpC,EAAA,KAAK,CAAC,GAAG,CAAC,KAAK,KACd,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,CAAkB,gBAAA,CAAA,IAAG,KAAK,CAAM,CAC1D,CAAC,CACC,KAEL,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CAC3B,CACG,CACP,EAEA,CAAC,mBAAmB,IAAI,mBAAmB,MAC1C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,eAAe,EAAA,EACtC,mBAAmB,KAClB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAG,EAAA,WAAW,oBAAoB,EAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAA4B,0BAAA,CAAA,EAAE,OAAO,EAAC,SAAS,EAAA,EAChF,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,GAAG,WAAW,CAAA,yBAAA,CAA2B,EAAA,YAAA,EACpC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,mBAAmB,EAAA,EAEhC,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAE,CAAA,EAAG,WAAW,CAAyB,uBAAA,CAAA,EAAE,IAAI,EAAC,kBAAkB,EAAA,CAAa,CACxF,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACd,EAAA,oBAAoB,IAAI,WAAW,IAClC,oBAAoB,IAAI,WAAW,KAEnC,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,wBAAwB,EAAQ,CAAA,CAC5C,CACG,EACN,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAA,EACnC,eAAe,GAAG,eAAe,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,kBAAkB,EAAQ,CAAA,CAChE,CACC,CACX,CACP,EACA,mBAAmB,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,WAAW,oBAAoB,EAC3C,EAAA,WAAW,GAAG,WAAW,GAAG,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CACzD,CACP,CACG,CACP,CACG;AAEV;;;;","names":[],"sources":["src/components/stzh-input/stzh-input-description.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\n\nexport type StzhInputDescriptionProps = {\n  id: string;\n  classPrefix: string;\n  error?: string[];\n  description?: string;\n  descriptionLong?: string;\n  descriptionLongTitle?: string;\n  descriptionLongUsed?: boolean;\n  moreInfoButtonLabel?: string;\n  showError?: boolean;\n  showDescriptionText?: boolean;\n};\n\nexport const StzhInputDescription: FunctionalComponent<StzhInputDescriptionProps> = ({\n  id,\n  classPrefix,\n  error,\n  description,\n  descriptionLong,\n  descriptionLongTitle,\n  descriptionLongUsed,\n  moreInfoButtonLabel,\n  showError = true,\n  showDescriptionText = true,\n}) => {\n  return (\n    <div class={`${classPrefix}__description-wrapper`} id={id}>\n      {showError && (\n        <div class={`${classPrefix}__error`}>\n          {error?.length > 0 ? (\n            <ul class={`${classPrefix}__error-list`}>\n              {error.map(error => (\n                <li class={`${classPrefix}__error-listitem`}>{error}</li>\n              ))}\n            </ul>\n          ) : (\n            <slot name=\"error\"></slot>\n          )}\n        </div>\n      )}\n\n      {(descriptionLongUsed || showDescriptionText) && (\n        <div class={`${classPrefix}__description`}>\n          {descriptionLongUsed && (\n            <div class={`${classPrefix}__description-long`}>\n              <stzh-popover class={`${classPrefix}__description-long-popover`} variant=\"tooltip\">\n                <button\n                  class={`${classPrefix}__description-long-button`}\n                  aria-label={moreInfoButtonLabel}\n                  type=\"button\"\n                  s-object-id={moreInfoButtonLabel}\n                >\n                  <stzh-icon class={`${classPrefix}__description-long-icon`} name=\"info-help-filled\"></stzh-icon>\n                </button>\n                <div slot=\"label\">\n                  {descriptionLongTitle || description ? (\n                    descriptionLongTitle || description\n                  ) : (\n                    <slot name=\"description-long-title\"></slot>\n                  )}\n                </div>\n                <stzh-text curve=\"none\" slot=\"content\">\n                  {descriptionLong ? descriptionLong : <slot name=\"description-long\"></slot>}\n                </stzh-text>\n              </stzh-popover>\n            </div>\n          )}\n          {showDescriptionText && (\n            <div class={`${classPrefix}__description-text`}>\n              {description ? description : <slot name=\"description\"></slot>}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"version":3}

package/dist/components/{p-CFzhqAe_.js → p-BsRNqz_b.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { d as defineCustomElement$3 } from './p-Yktwo3G-.js';
-import { d as defineCustomElement$2 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$1 } from './p-D1qHu5Qi.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { d as defineCustomElement$3 } from './p-DEfzwFSm.js';
+import { d as defineCustomElement$2 } from './p-CRo_30JG.js';
+import { d as defineCustomElement$1 } from './p-DrLVNdlm.js';
 
 const stzhAppNavCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}@media screen and (max-width: 899px){.stzh-app-nav{height:var(--stzh-app-nav-height)}}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}`;
 
@@ -72,6 +72,6 @@ function defineCustomElement() {
 }
 
 export { StzhAppNav as S, defineCustomElement as d };
-//# sourceMappingURL=p-CFzhqAe_.js.map
+//# sourceMappingURL=p-BsRNqz_b.js.map
 
-//# sourceMappingURL=p-CFzhqAe_.js.map
+//# sourceMappingURL=p-BsRNqz_b.js.map

package/dist/components/{p-CFzhqAe_.js.map → p-BsRNqz_b.js.map}

@@ -1 +1 @@
-{"file":"p-CFzhqAe_.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAwCF;AApDC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,OAAO,EAAA,YAAA,EACF,IAAI,CAAC,YAAY,CAAC,KAAK,EACnC,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EACzB,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav\n          role=\"navigation\"\n          class={classes}\n          aria-label={this.localization.title}\n          id={this.appNavId || null}\n          tabindex=\"-1\"\n        >\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BsRNqz_b.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,q4GAAq4G,CAAC;;MCUt5G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAqB,EAAE;QAgB5B,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB,KAAI;AAC1E,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;AAC5B,gBAAA,SAAS,EAAE,cAAc;gBACzB,IAAI;AACJ,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAwCF;AApDC,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;;;IAYnG,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;SACrB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,OAAO,EAAA,YAAA,EACF,IAAI,CAAC,YAAY,CAAC,KAAK,EACnC,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,EACzB,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EACzC,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,EACD,cAAA,EAAA,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACN,SAAA,EAAA,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,KAAI;AACzB,gBAAA,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC;AACrC,aAAC,EAAA,EAEA,IAAI,CAAC,IAAI,CACA,CACb,CAAC,CACE,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n  background-color: var(--stzh-color-coolgrey10);\n\n  @include mq($to: medium) {\n    height: var(--stzh-app-nav-height);\n  }\n\n  &__links {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    padding: space(\"medium\") space(\"large\") space(\"xlarge\");\n\n    @include mq($from: medium) {\n      padding: 0;\n      align-items: center;\n    }\n  }\n\n  &__link,\n  .stzh-app-nav__link a {\n    --text-decoration-line: none;\n    --hover-text-decoration-line: none;\n    color: var(--stzh-color-coolgrey90);\n\n    @include mq($from: medium) {\n      margin-right: space(\"xlarge\");\n    }\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      color: var(--stzh-color-primary60);\n    }\n  }\n\n  .stzh-app-nav__link a.stzh-link--is-active,\n  .stzh-app-nav__link.stzh-link--is-active {\n    text-decoration: none;\n    color: var(--stzh-color-primary70);\n\n    @include mq($from: medium) {\n      @include font(\"heavy\");\n    }\n  }\n\n  .stzh-link__inner {\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  .stzh-link__text {\n    @include font(\"medium\");\n    @include fontSize(\"pico\");\n\n    @include mq($from: medium) {\n      @include fontSize(\"milli\");\n      font-weight: var(--stzh-font-weight-medium);\n    }\n  }\n\n  .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)\n    + .stzh-link__text.sc-stzh-link:not(:empty),\n  .stzh-link__text.sc-stzh-link:not(:empty)\n    + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n    margin-top: space(\"xxsmall\");\n    margin-left: 0;\n\n    @include mq($from: medium) {\n      margin-left: space(\"xsmall\");\n      margin-top: 0;\n    }\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem, StzhAppNavItemClickEvent } from \"../../index\";\n\n@Component({\n  tag: \"stzh-app-nav\",\n  styleUrl: \"stzh-app-nav.scss\",\n})\nexport class StzhAppNav {\n  /** Translation strings */\n  @Prop() localization: StzhAppNavLocalizedText;\n\n  /** AppNav menu items */\n  @Prop() items: StzhAppNavItem[] = [];\n\n  /** AppNav element ID */\n  @Prop() appNavId: string;\n\n  @Element() element: HTMLStzhAppNavElement;\n\n  /** AppNav item click event */\n  @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n    }\n  }\n\n  private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n    this.stzhAppNavItemClick.emit({\n      component: \"stzh-app-nav\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-app-nav\": true,\n    };\n\n    return (\n      <Host>\n        <nav\n          role=\"navigation\"\n          class={classes}\n          aria-label={this.localization.title}\n          id={this.appNavId || null}\n          tabindex=\"-1\"\n        >\n          <div class=\"stzh-app-nav__links\" role=\"list\">\n            {this.items.map(item => (\n              <stzh-link\n                class=\"stzh-app-nav__link\"\n                active={item.active}\n                role=\"listitem\"\n                a11y-current={item.a11yCurrent}\n                href={item.href}\n                badge={item.badge}\n                badgeType={item.badgeType}\n                icon={item.icon}\n                link-id={item.id}\n                onClick={(e: MouseEvent) => {\n                  this.handleAppNavItemClick(e, item);\n                }}\n              >\n                {item.text}\n              </stzh-link>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BW2gjhHd.js → p-Bsor2Gp2.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
-import { c as camelCase, h as hasSlot } from './p-CN5apKPb.js';
-import { S as StzhInputDescription } from './p-x2lzAuxg.js';
-import { d as defineCustomElement$3 } from './p-DZ_hOgVb.js';
-import { d as defineCustomElement$2 } from './p-BNRtW-oE.js';
-import { d as defineCustomElement$1 } from './p-CqIeGIYq.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { c as camelCase, h as hasSlot } from './p-DBHUqFOB.js';
+import { S as StzhInputDescription } from './p-BmG3hFM8.js';
+import { d as defineCustomElement$3 } from './p-CRo_30JG.js';
+import { d as defineCustomElement$2 } from './p-DT0ux3Yn.js';
+import { d as defineCustomElement$1 } from './p-4Vt8Vqot.js';
 
 const stzhRadiogroupCss = () => `.sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall);display:flex;align-items:center;gap:var(--stzh-space-xsmall);min-width:0;max-width:100%}.stzh-radiogroup__legend-text.sc-stzh-radiogroup{min-width:0}.stzh-radiogroup__legend.sc-stzh-radiogroup>.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{flex:0 0 auto;display:inline-flex;align-items:flex-start;margin:0}.stzh-radiogroup__legend.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__legend.sc-stzh-radiogroup .stzh-radiogroup__description-text.sc-stzh-radiogroup{display:none}.stzh-radiogroup__legend.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup,.stzh-radiogroup__legend.sc-stzh-radiogroup .stzh-radiogroup__description-long.sc-stzh-radiogroup{display:inline-flex;align-items:flex-start;margin:0}.stzh-radiogroup__legend.sc-stzh-radiogroup .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.stzh-radiogroup__legend.sc-stzh-radiogroup stzh-popover.sc-stzh-radiogroup .stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-small);display:block;line-height:0;color:var(--stzh-color-primary70)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}`;
 
@@ -246,6 +246,6 @@ function defineCustomElement() {
 }
 
 export { StzhRadiogroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-BW2gjhHd.js.map
+//# sourceMappingURL=p-Bsor2Gp2.js.map
 
-//# sourceMappingURL=p-BW2gjhHd.js.map
+//# sourceMappingURL=p-Bsor2Gp2.js.map

package/dist/components/{p-BW2gjhHd.js.map → p-Bsor2Gp2.js.map}

@@ -1 +1 @@
-{"file":"p-BW2gjhHd.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  &__legend-text {\n    min-width: 0;\n  }\n\n  &__legend > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__legend &__error,\n  &__legend &__description-text {\n    display: none;\n  }\n\n  &__legend &__description,\n  &__legend &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__legend &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__legend stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent, StzhRadioValue } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value. Note that boolean values only work with property binding (not with attribute binding). */\n  @Prop({ mutable: true }) value?: StzhRadioValue;\n\n  /** Default value (used by reset). Note that boolean values only work with property binding (not with attribute binding). */\n  @Prop({ mutable: true }) defaultValue?: StzhRadioValue;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: StzhRadioValue) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: StzhRadioValue | undefined) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value) ?? null;\n    this.radios.forEach(radio => {\n      radio.checked = this.checkedRadio === radio;\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const legendUsed = !this.hideLegend && (!!this.legend || descriptionLongUsed);\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {legendUsed && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend && (\n                <span class=\"stzh-radiogroup__legend-text\">\n                  {this.legend}\n\n                  {!this.hideOptional && (\n                    <span class=\"stzh-radiogroup__marker\">\n                      <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-radiogroup__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n              )}\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-radiogroup\"\n                  id={`${this.radiogroupId}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Bsor2Gp2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  &__legend-text {\n    min-width: 0;\n  }\n\n  &__legend > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__legend &__error,\n  &__legend &__description-text {\n    display: none;\n  }\n\n  &__legend &__description,\n  &__legend &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__legend &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__legend stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent, StzhRadioValue } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value. Note that boolean values only work with property binding (not with attribute binding). */\n  @Prop({ mutable: true }) value?: StzhRadioValue;\n\n  /** Default value (used by reset). Note that boolean values only work with property binding (not with attribute binding). */\n  @Prop({ mutable: true }) defaultValue?: StzhRadioValue;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: StzhRadioValue) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: StzhRadioValue | undefined) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value) ?? null;\n    this.radios.forEach(radio => {\n      radio.checked = this.checkedRadio === radio;\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const legendUsed = !this.hideLegend && (!!this.legend || descriptionLongUsed);\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {legendUsed && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend && (\n                <span class=\"stzh-radiogroup__legend-text\">\n                  {this.legend}\n\n                  {!this.hideOptional && (\n                    <span class=\"stzh-radiogroup__marker\">\n                      <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-radiogroup__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n              )}\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-radiogroup\"\n                  id={`${this.radiogroupId}-description-long`}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DF6aCFVH.js → p-C0lp0Fm8.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-5QD-jnDI.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
 
 const stzhPiTeaserLayoutItemCss = () => `@charset "UTF-8";
 
@@ -521,6 +521,6 @@ function defineCustomElement() {
 }
 
 export { StzhPiTeaserLayoutItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-DF6aCFVH.js.map
+//# sourceMappingURL=p-C0lp0Fm8.js.map
 
-//# sourceMappingURL=p-DF6aCFVH.js.map
+//# sourceMappingURL=p-C0lp0Fm8.js.map