@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

@@ -1 +1 @@
-{"file":"stzh-ratio2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,63QAA63Q;;MCYr4Q,SAAS;;;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=scoped","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 1)}\n    / #{nth(map-get($ratios, $ratioDefault), 2)};\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 2)}\n    / #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: nth($value, 1);\n    $secondNr: nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--ratio);\n  background: var(--background-color);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-ratio2.js","mappings":";;AAAA,MAAM,YAAY,GAAG,29QAA29Q;;MCYn+Q,SAAS;;;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=scoped","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 1)}\n    / #{nth(map-get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{nth(map-get($ratios, $ratioDefault), 2)}\n    / #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: nth($value, 1);\n    $secondNr: nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--ratio);\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  scoped: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-richtext2.js

@@ -3,10 +3,10 @@ import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
 const stzhRichtextCss = "@charset \"UTF-8\";.sc-stzh-richtext-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-richtext-h{display:none}.sc-stzh-richtext-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-richtext-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-richtext-h *.sc-stzh-richtext,.sc-stzh-richtext-h *.sc-stzh-richtext::before,.sc-stzh-richtext-h *.sc-stzh-richtext::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-richtext-h .has-focus.sc-stzh-richtext{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-richtext-h .stzh-fylingfocus-focused.sc-stzh-richtext{outline-style:none !important}.sc-stzh-richtext-h .stzh-fylingfocus-focused.sc-stzh-richtext::-moz-focus-inner{border:0 !important}.sc-stzh-richtext-h{--color:var(--stzh-base-color);--richtext-blockquote-color:var(--stzh-richtext-blockquote-color, var(--stzh-color-primary70));--richtext-blockquote-line-color:var(--stzh-richtext-blockquote-line-color, var(--stzh-color-primary70));--richtext-blockquote-footer-color:var(--stzh-richtext-blockquote-footer-color, var(--stzh-color-old-grey55));color:var(--color);--display:var(--stzh-richtext-display, block);--grid-template-areas:var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );--grid-template-columns:var(\n    --stzh-richtext-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){.sc-stzh-richtext-h{--grid-template-areas:var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-richtext-h{--grid-template-areas:var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );--grid-template-columns:var(\n      --stzh-richtext-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}.sc-stzh-richtext-h .sc-stzh-richtext-s .float-left{float:left}.sc-stzh-richtext-h .sc-stzh-richtext-s .float-right{float:right}.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0}.sc-stzh-richtext-h .sc-stzh-richtext-s b,.sc-stzh-richtext-h .sc-stzh-richtext-s strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-richtext-h .sc-stzh-richtext-s i,.sc-stzh-richtext-h .sc-stzh-richtext-s em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.sc-stzh-richtext-h .sc-stzh-richtext-s>*,.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s>*,.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sc-stzh-richtext-h .sc-stzh-richtext-s h1{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h1{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h1{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h1{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h1{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))}}.sc-stzh-richtext-h .sc-stzh-richtext-s h2{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h2{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h2{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h2{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))}}.sc-stzh-richtext-h .sc-stzh-richtext-s h3{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h3{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h3{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h3{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))}}.sc-stzh-richtext-h .sc-stzh-richtext-s h4{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h4{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h4{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){.sc-stzh-richtext-h .sc-stzh-richtext-s h4{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))}}.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"1\"]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h1,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"1\"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h2,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"2\"]{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h3,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"3\"]{margin-top:var(--stzh-space-xsmall)}}.sc-stzh-richtext-h .sc-stzh-richtext-s h4,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h4,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h4,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"4\"]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s h4,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s h4,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[level=\"4\"]{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text,.sc-stzh-richtext-h .sc-stzh-richtext-s ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text,.sc-stzh-richtext-h .sc-stzh-richtext-s ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text,.sc-stzh-richtext-h .sc-stzh-richtext-s ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s p,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text,.sc-stzh-richtext-h .sc-stzh-richtext-s ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-richtext-h .sc-stzh-richtext-s ul ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ul ol,.sc-stzh-richtext-h .sc-stzh-richtext-s ul dl,.sc-stzh-richtext-h .sc-stzh-richtext-s ul stzh-list,.sc-stzh-richtext-h .sc-stzh-richtext-s ol ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol ol,.sc-stzh-richtext-h .sc-stzh-richtext-s ol dl,.sc-stzh-richtext-h .sc-stzh-richtext-s ol stzh-list,.sc-stzh-richtext-h .sc-stzh-richtext-s dl ul,.sc-stzh-richtext-h .sc-stzh-richtext-s dl ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl dl,.sc-stzh-richtext-h .sc-stzh-richtext-s dl stzh-list,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list ul,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list ol,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list dl,.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-list stzh-list{margin-top:0;margin-bottom:0}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=hero],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge);margin-top:0}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=hero],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=hero],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h1]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-top:var(--stzh-space-medium);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h3],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h3]{margin-top:var(--stzh-space-xsmall)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h4],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h4]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h4],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h4]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h4],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h4]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h4],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=h4],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=h4]{margin-bottom:var(--stzh-space-medium)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-medium);margin-top:0}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p1],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p1]{margin-bottom:var(--stzh-space-xxlarge)}}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-text[curve=p2],.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sc-stzh-richtext-h .sc-stzh-richtext-s ul,.sc-stzh-richtext-h .sc-stzh-richtext-s ol,.sc-stzh-richtext-h .sc-stzh-richtext-s dl{list-style:none;padding-left:0;overflow:hidden}.sc-stzh-richtext-h .sc-stzh-richtext-s ol{counter-reset:li-counter}.sc-stzh-richtext-h .sc-stzh-richtext-s ul li,.sc-stzh-richtext-h .sc-stzh-richtext-s ol li{position:relative}.sc-stzh-richtext-h .sc-stzh-richtext-s ul li::before,.sc-stzh-richtext-h .sc-stzh-richtext-s ol li::before{display:inline-block;position:absolute;left:0;top:0}.sc-stzh-richtext-h .sc-stzh-richtext-s ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sc-stzh-richtext-h .sc-stzh-richtext-s ul li::before{content:\"–\"}.sc-stzh-richtext-h .sc-stzh-richtext-s ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sc-stzh-richtext-h .sc-stzh-richtext-s ol li::before{content:counter(li-counter) \". \"}.sc-stzh-richtext-h .sc-stzh-richtext-s stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{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-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{margin:var(--stzh-space-xxxxlarge)}}@media print{.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) * 2);width:0.1875rem;content:\" \";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p{margin-bottom:var(--stzh-space-large)}}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p::before,.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p::after{display:inline-block}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p::before{content:\"«\"}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote p::after{content:\"»\"}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 900px){.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sc-stzh-richtext-h .sc-stzh-richtext-s blockquote footer::before{content:\"–\";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sc-stzh-richtext-h .sc-stzh-richtext-s table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width)}.sc-stzh-richtext-h .sc-stzh-richtext-s table.has-layout-fixed{table-layout:fixed}.sc-stzh-richtext-h .sc-stzh-richtext-s thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sc-stzh-richtext-h .sc-stzh-richtext-s tbody tr:nth-child(even) td,.sc-stzh-richtext-h .sc-stzh-richtext-s tbody tr:nth-child(even) th{background-color:var(--stzh-color-grey10)}.sc-stzh-richtext-h .sc-stzh-richtext-s td,.sc-stzh-richtext-h .sc-stzh-richtext-s th{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);text-align:left;border:none;vertical-align:top;border:none;background-color:var(--stzh-color-white);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding)}.sc-stzh-richtext-h .sc-stzh-richtext-s td a,.sc-stzh-richtext-h .sc-stzh-richtext-s th 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-richtext-h .sc-stzh-richtext-s td a:hover,.sc-stzh-richtext-h .sc-stzh-richtext-s th 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-richtext-h .sc-stzh-richtext-s td b,.sc-stzh-richtext-h .sc-stzh-richtext-s td strong,.sc-stzh-richtext-h .sc-stzh-richtext-s th b,.sc-stzh-richtext-h .sc-stzh-richtext-s th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-richtext-h .sc-stzh-richtext-s td i,.sc-stzh-richtext-h .sc-stzh-richtext-s td em,.sc-stzh-richtext-h .sc-stzh-richtext-s th i,.sc-stzh-richtext-h .sc-stzh-richtext-s th em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.sc-stzh-richtext-h .sc-stzh-richtext-s td.align-left,.sc-stzh-richtext-h .sc-stzh-richtext-s th.align-left{text-align:left}.sc-stzh-richtext-h .sc-stzh-richtext-s td.align-right,.sc-stzh-richtext-h .sc-stzh-richtext-s th.align-right{text-align:right}.sc-stzh-richtext-h .sc-stzh-richtext-s td.align-center,.sc-stzh-richtext-h .sc-stzh-richtext-s th.align-center{text-align:center}.sc-stzh-richtext-h .sc-stzh-richtext-s td.valign-auto,.sc-stzh-richtext-h .sc-stzh-richtext-s th.valign-auto{vertical-align:auto}.sc-stzh-richtext-h .sc-stzh-richtext-s td.valign-middle,.sc-stzh-richtext-h .sc-stzh-richtext-s th.valign-middle{vertical-align:middle}.sc-stzh-richtext-h .sc-stzh-richtext-s td.valign-bottom,.sc-stzh-richtext-h .sc-stzh-richtext-s th.valign-bottom{vertical-align:bottom}.sc-stzh-richtext-h .sc-stzh-richtext-s td.valign-top,.sc-stzh-richtext-h .sc-stzh-richtext-s th.valign-top{vertical-align:top}.sc-stzh-richtext-h .sc-stzh-richtext-s td.nowrap,.sc-stzh-richtext-h .sc-stzh-richtext-s th.nowrap{white-space:nowrap}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-head,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-left,.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-right,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-left,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sc-stzh-richtext-h .sc-stzh-richtext-s td.has-sticked,.sc-stzh-richtext-h .sc-stzh-richtext-s th.has-sticked{z-index:2}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-left,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-left{left:0}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-right,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-right{right:0}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-left::after,.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-right::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-left::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-right::after{background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;transform:translate(100%);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-left::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-left::after{right:0}.sc-stzh-richtext-h .sc-stzh-richtext-s td.is-sticky-right::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.sc-stzh-richtext-h .sc-stzh-richtext-s td.has-sticked.is-sticky-left::after,.sc-stzh-richtext-h .sc-stzh-richtext-s td.has-sticked.is-sticky-right::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.has-sticked.is-sticky-left::after,.sc-stzh-richtext-h .sc-stzh-richtext-s th.has-sticked.is-sticky-right::after{opacity:1}.sc-stzh-richtext-h .sc-stzh-richtext-s th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.sc-stzh-richtext-h .sc-stzh-richtext-s th.is-sortable{padding:0}.sc-stzh-richtext-h .sc-stzh-richtext-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-richtext-h .sc-stzh-richtext-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-richtext-h .sc-stzh-richtext-s .stzh-richtext__external-link{position:relative}.sc-stzh-richtext-h .sc-stzh-richtext-s .stzh-richtext__external-vhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.sc-stzh-richtext-h .sc-stzh-richtext-s .stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sc-stzh-richtext-h .sc-stzh-richtext-s .stzh-richtext__external-icon{--icon:var(--stzh-icon-size);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size);height:var(--stzh-icon-size)}.sc-stzh-richtext-h[has-hidden-first-margin] .sc-stzh-richtext-s>*:first-child{margin-top:0 !important}.sc-stzh-richtext-h[has-hidden-last-margin] .sc-stzh-richtext-s>*:last-child{margin-bottom:0 !important}.stzh-richtext.sc-stzh-richtext{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:var(--display);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-richtext.sc-stzh-richtext{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-richtext.sc-stzh-richtext{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-richtext.sc-stzh-richtext{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-richtext.sc-stzh-richtext{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-richtext__text.sc-stzh-richtext{grid-area:text;display:grid}";
 
-const CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';
-const CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';
-const CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';
-const CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';
+const CLASS_EXTERNAL_LINK = "stzh-richtext__external-link";
+const CLASS_EXTERNAL_ICON_WRAPPER = "stzh-richtext__external-icon-wrapper";
+const CLASS_EXTERNAL_ICON = "stzh-richtext__external-icon";
+const CLASS_EXTERNAL_VHIDDEN = "stzh-richtext__external-vhidden";
 const StzhRichtext = /*@__PURE__*/ proxyCustomElement(class StzhRichtext extends HTMLElement {
   constructor() {
     super();
@@ -15,22 +15,28 @@ const StzhRichtext = /*@__PURE__*/ proxyCustomElement(class StzhRichtext extends
     this.removeFirstMargin = undefined;
     this.removeLastMargin = undefined;
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
-    this.externalLinkIcon = 'external-link';
+    this.externalLinkIcon = "external-link";
   }
   addExternalLinkIcons() {
     this.externalLinks.forEach(externalLink => {
       externalLink.classList.add(CLASS_EXTERNAL_LINK);
-      const screenreaderText = document.createElement('span');
-      screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);
-      screenreaderText.innerText = this.localization.$globals.externalLinkLabel;
-      const iconWrapper = document.createElement('span');
-      iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);
-      const icon = document.createElement('stzh-icon');
-      icon.classList.add(CLASS_EXTERNAL_ICON);
-      icon.name = this.externalLinkIcon;
-      iconWrapper.appendChild(icon);
-      externalLink.prepend(screenreaderText);
-      externalLink.appendChild(iconWrapper);
+      // Check if screenreaderText already exists
+      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {
+        const screenreaderText = document.createElement("span");
+        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);
+        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;
+        externalLink.prepend(screenreaderText);
+      }
+      // Check if iconWrapper already exists
+      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {
+        const iconWrapper = document.createElement("span");
+        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);
+        const icon = document.createElement("stzh-icon");
+        icon.classList.add(CLASS_EXTERNAL_ICON);
+        icon.name = this.externalLinkIcon;
+        iconWrapper.appendChild(icon);
+        externalLink.appendChild(iconWrapper);
+      }
     });
   }
   async componentWillLoad() {
@@ -40,11 +46,13 @@ const StzhRichtext = /*@__PURE__*/ proxyCustomElement(class StzhRichtext extends
   }
   componentDidRender() {
     this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));
-    this.addExternalLinkIcons();
+    if (this.externalLinks && this.externalLinks.length > 0) {
+      this.addExternalLinkIcons();
+    }
   }
   render() {
     const classes = {
-      "stzh-richtext": true
+      "stzh-richtext": true,
     };
     return (h(Host, { "has-hidden-first-margin": typeof this.removeFirstMargin === "boolean" ? this.removeFirstMargin : true, "has-hidden-last-margin": typeof this.removeLastMargin === "boolean" ? this.removeLastMargin : true }, h("div", { class: classes }, h("div", { class: "stzh-richtext__text" }, h("slot", null)))));
   }

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

@@ -1 +1 @@
-{"file":"stzh-richtext2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,0qpCAA0qpC;;ACQlspC,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;MAYpD,YAAY;;;;;;;gCAWgB,0CAA0C;4BAG9C,eAAe;;EAM1C,oBAAoB;IAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY;MACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MAEhD,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;MACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;MAE1E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;MAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;MAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAE9B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;MACvC,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC,CAAC;GACJ;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACnG;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,qBAAqB,IAC9B,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx"],"sourcesContent":[":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element\n} from \"@stencil/core\";\n\nconst CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';\nconst CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';\nconst CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';\nconst CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = 'external-link';\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      const screenreaderText = document.createElement('span');\n      screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n      screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n\n      const iconWrapper = document.createElement('span');\n      iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n      const icon = document.createElement('stzh-icon');\n      icon.classList.add(CLASS_EXTERNAL_ICON);\n      icon.name = this.externalLinkIcon;\n      iconWrapper.appendChild(icon);\n\n      externalLink.prepend(screenreaderText);\n      externalLink.appendChild(iconWrapper);\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    this.addExternalLinkIcons();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-richtext2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,0qpCAA0qpC;;ACGlspC,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;MAUpD,YAAY;;;;;;;gCAWgB,0CAA0C;4BAG9C,eAAe;;EAM1C,oBAAoB;IAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY;MACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;MAGhD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,sBAAsB,EAAE,CAAC,EAAE;QAC7D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;QACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC1E,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;OACxC;;MAGD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,2BAA2B,EAAE,CAAC,EAAE;QAClE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE9B,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;OACvC;KACF,CAAC,CAAC;GACJ;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;KACnG;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC1F,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;MACvD,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,qBAAqB,IAC9B,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx"],"sourcesContent":[":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-scrollup.js

@@ -12,24 +12,24 @@ const StzhScrollup$1 = /*@__PURE__*/ proxyCustomElement(class StzhScrollup exten
       window.scrollTo({
         top: 0,
         left: 0,
-        behavior: "smooth"
+        behavior: "smooth",
       });
     };
     this.handleSlotchange = () => {
       var _a;
       const host = ((_a = this.element.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) || this.element;
       const links = host.querySelectorAll("stzh-link, stzh-button");
-      links.forEach((link) => {
-        link.addEventListener('click', this.handleLinkClick);
+      links.forEach(link => {
+        link.addEventListener("click", this.handleLinkClick);
         setPropsIfNull(link, {
-          icon: "arrow-up"
+          icon: "arrow-up",
         });
       });
     };
   }
   render() {
     const classes = {
-      "stzh-scrollup": true
+      "stzh-scrollup": true,
     };
     return (h(Host, null, h("div", { class: classes }, h("slot", { onSlotchange: this.handleSlotchange }))));
   }

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

@@ -1 +1 @@
-{"file":"stzh-scrollup.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,skCAAskC;;MCiBjlCA,cAAY;EALzB;;;;IAQU,oBAAe,GAAG;MACxB,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ,CAAA;IAEO,qBAAgB,GAAG;;MACzB,MAAM,IAAI,GAAG,CAAA,MAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAiB,0CAAE,IAAI,KAAI,IAAI,CAAC,OAAO,CAAC;MAC9E,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;MAE9D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAErD,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,UAAU;SAC8B,CAAC,CAAA;OAClD,CAAC,CAAC;KACJ,CAAA;GAeF;EAbC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhScrollup"],"sources":["src/components/stzh-scrollup/stzh-scrollup.scss?tag=stzh-scrollup&encapsulation=shadow","src/components/stzh-scrollup/stzh-scrollup.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-scrollup {\n  display: contents;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-scrollup\",\n  styleUrl: \"stzh-scrollup.scss\",\n  shadow: true\n})\nexport class StzhScrollup {\n  @Element() element: HTMLStzhScrollupElement;\n\n  private handleLinkClick = () => {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: \"smooth\"\n    });\n  }\n\n  private handleSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const links = host.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach((link) => {\n      link.addEventListener('click', this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"arrow-up\"\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-scrollup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-scrollup.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,skCAAskC;;MCYjlCA,cAAY;EALzB;;;;IAQU,oBAAe,GAAG;MACxB,MAAM,CAAC,QAAQ,CAAC;QACd,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OACnB,CAAC,CAAC;KACJ,CAAC;IAEM,qBAAgB,GAAG;;MACzB,MAAM,IAAI,GAAG,CAAA,MAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAiB,0CAAE,IAAI,KAAI,IAAI,CAAC,OAAO,CAAC;MAC9E,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;MAE9D,KAAK,CAAC,OAAO,CAAC,IAAI;QAChB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAErD,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,UAAU;SAC8B,CAAC,CAAC;OACnD,CAAC,CAAC;KACJ,CAAC;GAeH;EAbC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhScrollup"],"sources":["src/components/stzh-scrollup/stzh-scrollup.scss?tag=stzh-scrollup&encapsulation=shadow","src/components/stzh-scrollup/stzh-scrollup.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  @media print {\n    display: none;\n  }\n}\n\n.stzh-scrollup {\n  display: contents;\n}\n","import { Component, Host, h, Element } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-scrollup\",\n  styleUrl: \"stzh-scrollup.scss\",\n  shadow: true,\n})\nexport class StzhScrollup {\n  @Element() element: HTMLStzhScrollupElement;\n\n  private handleLinkClick = () => {\n    window.scrollTo({\n      top: 0,\n      left: 0,\n      behavior: \"smooth\",\n    });\n  };\n\n  private handleSlotchange = () => {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const links = host.querySelectorAll(\"stzh-link, stzh-button\");\n\n    links.forEach(link => {\n      link.addEventListener(\"click\", this.handleLinkClick);\n\n      setPropsIfNull(link, {\n        icon: \"arrow-up\",\n      } as HTMLStzhLinkElement | HTMLStzhButtonElement);\n    });\n  };\n\n  render() {\n    const classes = {\n      \"stzh-scrollup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-section.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhSectionCss = ":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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 .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{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}@media screen and (min-width: 600px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout=\"default\"]))){position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-medium));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-medium))}@media screen and (min-width: 600px){:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}";
+const stzhSectionCss = ":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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 .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{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom)}@media screen and (min-width: 600px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout=\"default\"]))){position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-medium));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-medium))}@media screen and (min-width: 600px){:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background=\"default\"]))){--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([variant=greybox]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-xxlarge);--padding-right:var(--stzh-space-xxlarge);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=greybox]):last-child{margin-bottom:0}:host([variant=poimax]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=poimax]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}";
 
 const StzhSection$1 = /*@__PURE__*/ proxyCustomElement(class StzhSection extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"stzh-section.js","mappings":";;AAAA,MAAM,cAAc,GAAG,2wPAA2wP;;MCWrxPA,aAAW;;;;;mBAEqD,SAAS;sBAGrB,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAElD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,2BAA2B,GAAG,IAAI,CAAC,QAAQ;QAC5C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;OAC1E,IAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAa,CACT,CACF,CACE,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSection"],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --heading-background-color: transparent;\n\n  --padding-left: var(--stzh-section-padding-left, 0px);\n  --padding-right: var(--stzh-section-padding-right, 0px);\n  --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n  --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n  --margin-top: var(--stzh-section-margin-top, 0px);\n  --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n  }\n\n  margin-top: var(--margin-top);\n  margin-bottom: var(--margin-bottom);\n\n  ::slotted(stzh-heading) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  width: calc(100vw - var(--stzh-scrollbar-width));\n  max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n  //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n  --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n  --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer')});\n  --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer')});\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n    --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer', 'large')});\n    --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer', 'large')});\n  }\n}\n\n:host([background=\"secondary\"]) {\n  --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n  --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n  @include spaceCurve('--padding-left', 'small');\n  @include spaceCurve('--padding-right', 'small');\n  @include spaceCurve('--padding-top', 'medium');\n  @include spaceCurve('--padding-bottom', 'medium');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n/* Highlight variant */\n\n:host([variant=\"contextbox\"]) {\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n  --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n  --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n  //--padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n  --padding-bottom: 0px;\n}\n\n.stzh-section {\n  background-color: var(--background-color);\n\n  &__heading {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--heading-background-color);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__wrapper {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n\n    --stzh-base-color: var(--color);\n  }\n\n  &--is-breakout &__outer {\n    @include container;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-section.js","mappings":";;AAAA,MAAM,cAAc,GAAG,4iVAA4iV;;MCWtjVA,aAAW;;;;;mBAE4E,SAAS;sBAG5C,SAAS;qBAGf,SAAS;wBAGN,SAAS;sBAGX,SAAS;yBAGN,SAAS;oBAGzB,KAAK;;EAElD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,2BAA2B,GAAG,IAAI,CAAC,QAAQ;QAC5C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACjD,CAAC,+BAA+B,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;OAC1E,IAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,eAAa,CACT,CACF,CACE,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSection"],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: transparent;\n  --heading-background-color: transparent;\n\n  --padding-left: var(--stzh-section-padding-left, 0px);\n  --padding-right: var(--stzh-section-padding-right, 0px);\n  --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n  --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n  --margin-top: var(--stzh-section-margin-top, 0px);\n  --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n  }\n\n  margin-top: var(--margin-top);\n  margin-bottom: var(--margin-bottom);\n\n  ::slotted(stzh-heading) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n  width: calc(100vw - var(--stzh-scrollbar-width));\n  max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n  //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n  --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n  --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer')});\n  --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer')});\n\n  @include mq($from: small) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n  }\n\n  @include mq($from: large) {\n    //--padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n    --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n    --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-outer', 'large')});\n    --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-outer', 'large')});\n  }\n}\n\n:host([background=\"secondary\"]) {\n  --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n  --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n  @include spaceCurve('--padding-left', 'small');\n  @include spaceCurve('--padding-right', 'small');\n  @include spaceCurve('--padding-top', 'medium');\n  @include spaceCurve('--padding-bottom', 'medium');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n/* Contextbox variant */\n\n:host([variant=\"contextbox\"]) {\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  --color: #{$sectionHighlightColor};\n  --background-color: #{$sectionHighlightBackgroundColor};\n  --heading-background-color: #{$colorSecondary40};\n\n  // disable nested section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Greybox variant */\n\n:host([variant=\"greybox\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'large');\n  @include spaceCurve('--padding-right', 'large');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n:host([variant=\"poimax\"]) {\n  --background-color: #{$colorGrey10};\n  @include spaceCurve('--padding-left', 'regular');\n  @include spaceCurve('--padding-right', 'regular');\n  @include spaceCurve('--padding-top', 'regular');\n  @include spaceCurve('--padding-bottom', 'regular');\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n  --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n  --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n  //--padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n  --padding-bottom: 0px;\n}\n\n.stzh-section {\n  background-color: var(--background-color);\n\n  &__heading {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--heading-background-color);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__wrapper {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n\n    --stzh-base-color: var(--color);\n  }\n\n  &--is-breakout &__outer {\n    @include container;\n  }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n  tag: \"stzh-section\",\n  styleUrl: \"stzh-section.scss\",\n  shadow: true,\n})\nexport class StzhSection {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n  /** Margin top spacing */\n  @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n  /** Margin bottom spacing */\n  @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n  /** Padding top spacing */\n  @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n  /** Padding bottom spacing */\n  @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n  /** Whether to breakout container */\n  @Prop({ reflect: true }) breakout: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <section\n          class={{\n            \"stzh-section\": true,\n            [`stzh-section--is-breakout`]: this.breakout,\n            [`stzh-section--${this.variant}`]: !!this.variant,\n            [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n          }}\n        >\n          <div class=\"stzh-section__outer\">\n            <div class=\"stzh-section__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-section__wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-share2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as abbreviateText, g as getMeta } from './utils.js';
+import { b as abbreviateText, d as getMeta } from './utils.js';
 import { d as defineCustomElement$5 } from './stzh-badge2.js';
 import { d as defineCustomElement$4 } from './stzh-button2.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';