@oiz/stzh-components 4.1.0 → 4.1.1-beta2

package/dist/cjs/stzh-vbz-intro.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-870b4dee.js');
 
-const stzhVbzIntroCss = ".sc-stzh-vbz-intro-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-vbz-intro-h,[stzh-hidden].sc-stzh-vbz-intro-h{display:none}.sc-stzh-vbz-intro-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::before,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::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-vbz-intro-h .has-focus.sc-stzh-vbz-intro{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro{outline-style:none !important}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-intro-h{--background-color-topnews:var(--stzh-topnews-background-color);--background-color-mostsearched:var(--stzh-mostsearched-background-color);--topnews-item-subtitle-font:var(--stzh-vbz-intro-topnews-subtitle-font, var(--stzh-font-family-medium));--topnews-item-subtitle-color:var(--stzh-vbz-intro-topnews-item-subtitle-color, var(--stzh-color-primary70));--topnews-item-subtitle-highlighted-color:var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));--grid-template-areas:\"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\"}@media screen and (min-width: 900px){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\"}}@media screen and (min-width: 1260px){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\"}}.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-vbz-intro.sc-stzh-vbz-intro{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{grid-area:ticker}@media screen and (min-width: 1600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{padding-left:0}}.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{grid-area:quicklinks;background-color:var(--stzh-color-primary60);padding-left:var(--stzh-space-large);margin-left:-1.25rem;padding-right:var(--stzh-space-large);margin-right:-1.25rem}@media screen and (min-width: 600px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:grid;gap:0 var(--stzh-space-large);grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:2rem;margin-left:-2rem;padding-right:2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:flex;gap:inherit;grid-template-columns:inherit;padding-left:2.5rem;margin-left:inherit;padding-right:2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-right:4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) * -0.5)}}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklinks__heading.sc-stzh-vbz-intro{--color:var(--stzh-color-white);margin-bottom:var(--stzh-space-xsmall)}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro{--text-decoration-line:none;--color:var(--stzh-color-white);--hover-text-decoration-line:none;--hover-color:var(--stzh-color-white);transition:transform 150ms ease;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(0.625rem)}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(1.25rem)}}";
+const stzhVbzIntroCss = ".sc-stzh-vbz-intro-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-vbz-intro-h,[stzh-hidden].sc-stzh-vbz-intro-h{display:none}.sc-stzh-vbz-intro-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::before,.sc-stzh-vbz-intro-h *.sc-stzh-vbz-intro::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-vbz-intro-h .has-focus.sc-stzh-vbz-intro{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro{outline-style:none !important}.sc-stzh-vbz-intro-h .stzh-fylingfocus-focused.sc-stzh-vbz-intro::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-intro-h{--mostsearched-background-color:var(--stzh-mostsearched-background-color);--topnews-background-color:var(--stzh-topnews-background-color);--topnews-item-subtitle-color:var(--stzh-vbz-intro-topnews-item-subtitle-color, var(--stzh-color-primary70));--topnews-item-subtitle-font:var(--stzh-vbz-intro-topnews-subtitle-font, var(--stzh-font-family-medium));--topnews-item-subtitle-highlighted-color:var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));--grid-template-areas:\"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\"}@media screen and (min-width: 900px){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\"}}@media screen and (min-width: 1260px){.sc-stzh-vbz-intro-h{--grid-template-areas:\"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\"}}.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-vbz-intro.sc-stzh-vbz-intro{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-vbz-intro.sc-stzh-vbz-intro{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro,.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{grid-area:ticker}@media screen and (min-width: 1600px){.stzh-vbz-intro__ticker.sc-stzh-vbz-intro{padding-left:0}}.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{grid-area:quicklinks;background-color:var(--stzh-color-primary60);padding-left:var(--stzh-space-large);margin-left:-1.25rem;padding-right:var(--stzh-space-large);margin-right:-1.25rem}@media screen and (min-width: 600px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:grid;gap:0 var(--stzh-space-large);grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:2rem;margin-left:-2rem;padding-right:2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{display:flex;gap:inherit;grid-template-columns:inherit;padding-left:2.5rem;margin-left:inherit;padding-right:2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{padding-right:4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-vbz-intro__quicklinks.sc-stzh-vbz-intro{margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) * -0.5)}}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklinks__heading.sc-stzh-vbz-intro{--color:var(--stzh-color-white);margin-bottom:var(--stzh-space-xsmall)}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro{--text-decoration-line:none;--color:var(--stzh-color-white);--hover-text-decoration-line:none;--hover-color:var(--stzh-color-white);transition:transform 150ms ease;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(0.625rem)}@media screen and (min-width: 900px){.stzh-vbz-intro.sc-stzh-vbz-intro .stzh-vbz-intro-quicklink__link.sc-stzh-vbz-intro:hover{transform:translateX(1.25rem)}}";
 const StzhVbzIntroStyle0 = stzhVbzIntroCss;
 
 const StzhVbzIntro = class {

package/dist/cjs/stzh-vbz-intro.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-vbz-intro.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,s8LAAs8L,CAAC;AAC/9L,2BAAe,eAAe;;MCWjB,YAAY;;;QAQf,gBAAW,GAA2B,EAAE,CAAC;QAiBzC,SAAI,GAAG;YACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACzC,CAAC;;0BApBgD,EAAE;;IAIpD,iBAAiB,CAAC,QAAqC;QACrD,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACzC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;aACvB;SACF;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;SAC7B;KACF;IAMD,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;SACpG;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,OAAO,IACjBA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1BA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,2EAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB,EACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,uBAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACnF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/CMS/VBZ/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/CMS/VBZ/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of top news section\n * @prop --background-color-mostsearched: Background color of top most searched section\n *\n * @prop --stzh-vbz-intro-subtitle-font: **Global**: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)\n */\n\n:host {\n  --background-color-topnews: #{$topnewsBackgroundColor};\n  --background-color-mostsearched: #{$mostsearchedBackgroundColor};\n  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n  --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n  --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n  --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n  @include mq($from: medium) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n  }\n}\n\n.stzh-vbz-intro {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n\n  &__ticker,\n  &__quicklinks {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__ticker {\n    grid-area: ticker;\n\n    @include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  /**\n   * Quick links.\n   */\n  &__quicklinks {\n    grid-area: quicklinks;\n    background-color: var(--stzh-color-primary60);\n    padding-left: space('large');\n    margin-left: $containerMargin * -1;\n    padding-right: space('large');\n    margin-right: $containerMargin * -1;\n\n    @include mq($from: small) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginSmall;\n      margin-left: $containerMarginSmall * -1;\n      padding-right: $containerMarginSmall;\n      margin-right: $containerMarginSmall * -1;\n    }\n\n    @include mq($from: medium) {\n      display: flex;\n      gap: inherit;\n      grid-template-columns: inherit;\n      padding-left: $containerMarginMedium;\n      margin-left: inherit;\n      padding-right: $containerMarginMedium;\n      margin-right: $containerMarginMedium * -1;\n    }\n\n    @include mq($from: large) {\n      padding-right: $containerMarginLarge;\n      margin-right: $containerMarginLarge * -1;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n    }\n  }\n\n  .stzh-vbz-intro-quicklinks__heading {\n    --color: var(--stzh-color-white);\n    margin-bottom: space('xsmall');\n  }\n\n  .stzh-vbz-intro-quicklink__link {\n    --text-decoration-line: none;\n    --color: var(--stzh-color-white);\n    --hover-text-decoration-line: none;\n    --hover-color: var(--stzh-color-white);\n\n    transition: transform 150ms ease;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n\n    &:hover, {\n      transform: translateX(10px);\n\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n/**\n * @slot ticker - slot for ticker content \n */\n@Component({\n  tag: \"stzh-vbz-intro\",\n  styleUrl: \"stzh-vbz-intro.scss\",\n  scoped: true,\n})\nexport class StzhVbzIntro {\n  @Element() element: HTMLStzhVbzIntroElement;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzIntroLocalizedText;\n\n  /** Most searched items */\n  @Prop() quicklinks: StzhVbzQuicklink[] | string = [];\n  private _quicklinks: StzhMostsearchedItem[] = [];\n\n  @Watch(\"quicklinks\")\n  quicklinksWatcher(newValue: StzhVbzQuicklink[] | string) {\n    if (!newValue) {\n      this._quicklinks = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._quicklinks = JSON.parse(newValue);\n      } catch (e) {\n        this._quicklinks = [];\n      }\n    } else {\n      this._quicklinks = newValue;\n    }\n  }\n\n  private init = () => {\n    this.quicklinksWatcher(this.quicklinks);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-intro\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-vbz-intro__ticker\">\n            <slot name=\"ticker\"></slot>\n          </div>\n          {this._quicklinks.length > 0 && (\n            <div class=\"stzh-vbz-intro__quicklinks\">\n              <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n                {this.localization.quicklinksHeading}\n              </stzh-heading>\n              {this._quicklinks.map(item => (\n                <div class=\"stzh-vbz-intro-quicklink\">\n                  <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-vbz-intro.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,s8LAAs8L,CAAC;AAC/9L,2BAAe,eAAe;;MCWjB,YAAY;;;QAQf,gBAAW,GAA2B,EAAE,CAAC;QAiBzC,SAAI,GAAG;YACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACzC,CAAC;;0BApBgD,EAAE;;IAIpD,iBAAiB,CAAC,QAAqC;QACrD,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACzC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;aACvB;SACF;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;SAC7B;KACF;IAMD,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;SACpG;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;SACvB,CAAC;QAEF,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,OAAO,IACjBA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,mEAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACL,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAC1BA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,2EAAc,KAAK,EAAC,oCAAoC,IACrD,IAAI,CAAC,YAAY,CAAC,iBAAiB,CACvB,EACd,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,KACxBA,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,uBAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACnF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/CMS/VBZ/stzh-vbz-intro/stzh-vbz-intro.scss?tag=stzh-vbz-intro&encapsulation=scoped","src/components/CMS/VBZ/stzh-vbz-intro/stzh-vbz-intro.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color of top news section\n * @prop --mostsearched-background-color: Background color of top most searched section\n *\n * @prop --stzh-vbz-intro-subtitle-font: **Global**: Font of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle\n * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)\n */\n\n:host {\n  --mostsearched-background-color: #{$mostsearchedBackgroundColor};\n  --topnews-background-color: #{$topnewsBackgroundColor};\n  --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, #{$colorPrimary70});\n  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, #{$topnewsSubtitleFont});\n  --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, #{$colorPrimary60});\n\n  --grid-template-areas: \"ticker ticker ticker ticker\" \"quicklinks quicklinks quicklinks quicklinks\";\n\n  @include mq($from: medium) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: \"ticker ticker ticker ticker ticker ticker ticker ticker quicklinks quicklinks quicklinks quicklinks\";\n  }\n}\n\n.stzh-vbz-intro {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n\n  &__ticker,\n  &__quicklinks {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &__ticker {\n    grid-area: ticker;\n\n    @include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  /**\n   * Quick links.\n   */\n  &__quicklinks {\n    grid-area: quicklinks;\n    background-color: var(--stzh-color-primary60);\n    padding-left: space('large');\n    margin-left: $containerMargin * -1;\n    padding-right: space('large');\n    margin-right: $containerMargin * -1;\n\n    @include mq($from: small) {\n      display: grid;\n      gap: 0 space('large');\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: $containerMarginSmall;\n      margin-left: $containerMarginSmall * -1;\n      padding-right: $containerMarginSmall;\n      margin-right: $containerMarginSmall * -1;\n    }\n\n    @include mq($from: medium) {\n      display: flex;\n      gap: inherit;\n      grid-template-columns: inherit;\n      padding-left: $containerMarginMedium;\n      margin-left: inherit;\n      padding-right: $containerMarginMedium;\n      margin-right: $containerMarginMedium * -1;\n    }\n\n    @include mq($from: large) {\n      padding-right: $containerMarginLarge;\n      margin-right: $containerMarginLarge * -1;\n    }\n\n    @include mq($from: ultra) {\n      margin-right: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) * -0.5));\n    }\n  }\n\n  .stzh-vbz-intro-quicklinks__heading {\n    --color: var(--stzh-color-white);\n    margin-bottom: space('xsmall');\n  }\n\n  .stzh-vbz-intro-quicklink__link {\n    --text-decoration-line: none;\n    --color: var(--stzh-color-white);\n    --hover-text-decoration-line: none;\n    --hover-color: var(--stzh-color-white);\n\n    transition: transform 150ms ease;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n\n    &:hover, {\n      transform: translateX(10px);\n\n      @include mq($from: medium) {\n        transform: translateX(20px);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhVbzQuicklink } from \"../../../../index\";\nimport { StzhVbzIntroLocalizedText } from \"./stzh-vbz-intro.localization\";\n\n/**\n * @slot ticker - slot for ticker content \n */\n@Component({\n  tag: \"stzh-vbz-intro\",\n  styleUrl: \"stzh-vbz-intro.scss\",\n  scoped: true,\n})\nexport class StzhVbzIntro {\n  @Element() element: HTMLStzhVbzIntroElement;\n\n  /** Translation strings. */\n  @Prop() localization: StzhVbzIntroLocalizedText;\n\n  /** Most searched items */\n  @Prop() quicklinks: StzhVbzQuicklink[] | string = [];\n  private _quicklinks: StzhMostsearchedItem[] = [];\n\n  @Watch(\"quicklinks\")\n  quicklinksWatcher(newValue: StzhVbzQuicklink[] | string) {\n    if (!newValue) {\n      this._quicklinks = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._quicklinks = JSON.parse(newValue);\n      } catch (e) {\n        this._quicklinks = [];\n      }\n    } else {\n      this._quicklinks = newValue;\n    }\n  }\n\n  private init = () => {\n    this.quicklinksWatcher(this.quicklinks);\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"vbz-intro\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-intro\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-vbz-intro__ticker\">\n            <slot name=\"ticker\"></slot>\n          </div>\n          {this._quicklinks.length > 0 && (\n            <div class=\"stzh-vbz-intro__quicklinks\">\n              <stzh-heading class=\"stzh-vbz-intro-quicklinks__heading\">\n                {this.localization.quicklinksHeading}\n              </stzh-heading>\n              {this._quicklinks.map(item => (\n                <div class=\"stzh-vbz-intro-quicklink\">\n                  <stzh-link class=\"stzh-vbz-intro-quicklink__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/{utils-5a53d7eb.js → utils-c0aaa7ec.js}

@@ -130,62 +130,15 @@ function addWordBreakToLinks(links) {
         }
     });
 }
-// `extras.experimentalSlotFixes` stencil config flag resolves cloning light dom elements
-// so our own cloneElement / cloneWrappedStzhElement helpers are not needed right now
-// (used before in cardlist and sortable component).
-// export function children(node: Element) {
-//   return childNodes(node).map((n: any) => n.nodeType === 1);
-// }
-// const nativeCloneNodeFn = Node.prototype.cloneNode;
-// export function cloneElement(node: Element, deep: boolean) {
-//   const clonedNode = nativeCloneNodeFn.call(node, false);
-//   const srcChildNodes = childNodes(node);
-//   if (deep) {
-//     for (let i = 0; i < srcChildNodes.length; i++) {
-//       if (srcChildNodes[i].nodeType !== 2) {
-//         const childClone = cloneElement(srcChildNodes[i], true);
-//         clonedNode.appendChild(childClone);
-//       }
-//     }
-//   }
-//   return clonedNode;
-// }
-// // Clone an stzh-* element that is using stencil polyfilled slots (no shadow dom)
-// // and potentially wrapped in normal elements (e.g. angular component)
-// export function cloneWrappedStzhElement(elementToClone: Element): [Element, Element, Element] {
-//   let clonedElement: Element;
-//   let clonedStzhElement: Element;
-//   let originalStzhElement: Element;
-//   if (isStzhElement(elementToClone)) {
-//     clonedElement = cloneElement(elementToClone, true);
-//     clonedStzhElement = clonedElement;
-//     originalStzhElement = elementToClone;
-//   } else {
-//     clonedElement = elementToClone.cloneNode() as Element;
-//     let clonedInnerElementLast: Element = clonedElement;
-//     let originalInnerElementLast: Element = elementToClone;
-//     // clone inner root elements separately until we find a stzh element
-//     while (originalInnerElementLast.children.length === 1 && !isStzhElement(originalInnerElementLast.children[0])) {
-//       originalInnerElementLast = originalInnerElementLast.children[0];
-//       const clonedInnerElementCurrent = originalInnerElementLast.cloneNode() as Element;
-//       clonedInnerElementLast.appendChild(clonedInnerElementCurrent);
-//       clonedInnerElementLast = clonedInnerElementCurrent;
-//     }
-//     if (isStzhElement(originalInnerElementLast.children[0])) {
-//       clonedStzhElement = cloneElement(originalInnerElementLast.children[0], true);
-//       originalStzhElement = originalInnerElementLast.children[0];
-//       clonedInnerElementLast.appendChild(clonedStzhElement);
-//     } else {
-//       // no root stzh element found, so we give up and just deep clone the root
-//       clonedElement = cloneElement(elementToClone, true);
-//     }
-//   }
-//   return [clonedElement, clonedStzhElement, originalStzhElement];
-// }
+function getTheme() {
+    const htmlElement = document.documentElement;
+    return Array.from(htmlElement.classList).find(className => className.startsWith("stzh-theme-"));
+}
 
 exports.addWordBreakToLinks = addWordBreakToLinks;
 exports.getMeta = getMeta;
 exports.getStzhEnvironment = getStzhEnvironment;
+exports.getTheme = getTheme;
 exports.hasSlot = hasSlot;
 exports.isStzhElement = isStzhElement;
 exports.isVisible = isVisible;
@@ -194,4 +147,4 @@ exports.raf = raf;
 exports.setProps = setProps;
 exports.setPropsIfNull = setPropsIfNull;
 
-//# sourceMappingURL=utils-5a53d7eb.js.map
+//# sourceMappingURL=utils-c0aaa7ec.js.map

package/dist/cjs/utils-c0aaa7ec.js.map

@@ -0,0 +1 @@
+{"file":"utils-c0aaa7ec.js","mappings":"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","names":["dashCase"],"sources":["src/utils/utils.ts"],"sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(childNodes(el)).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute(\"slot\")) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    if (element.getAttribute(dashCase(attribute)) === null) {\n      element[attribute] = attributes[attribute];\n    }\n  });\n}\n\nexport function setProps(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    element[attribute] = attributes[attribute];\n  });\n}\n\nexport function isStzhElement(element: Element) {\n  if (!element || element.nodeType !== 1) {\n    return false;\n  }\n\n  return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n  const meta = document.querySelector(\n    `meta[name=\"${name}\"],[property=\"${name}\"]`\n  );\n  return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element | Node) {\n  const parents = [];\n\n  while (node) {\n    parents.unshift(node);\n    node = node.parentNode;\n  }\n\n  return parents;\n}\n\nexport function childNodes(node: Element) {\n  const childNodes = node.childNodes;\n\n  // check if element is stencil element without shadow dom\n  // and then detect elements that were slotted into the element\n  if (node[\"s-sc\"]) {\n    const result = [];\n\n    for (let i = 0; i < childNodes.length; i++) {\n      const slot = childNodes[i][\"s-nr\"];\n\n      if (slot) {\n        result.push(slot);\n      }\n    }\n\n    return result;\n  }\n\n  return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n  // @ts-ignore\n  if (typeof element.checkVisibility !== \"undefined\") {\n    // @ts-ignore\n    return element.checkVisibility({\n      checkOpacity: false,\n      checkVisibilityCSS: false\n    });\n  } else {\n    return !!(\n      element.offsetWidth ||\n      element.offsetHeight ||\n      element.getClientRects().length\n    );\n  }\n}\n\nexport function offset(element): { top: number; left: number } {\n  if (!element.getClientRects().length) {\n    return { top: 0, left: 0 };\n  }\n\n  let rect = element.getBoundingClientRect();\n  let win = element.ownerDocument.defaultView;\n\n  return {\n    top: rect.top + win.pageYOffset,\n    left: rect.left + win.pageXOffset\n  };\n}\n\nexport async function raf() {\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      resolve();\n    });\n  });\n}\n\nexport async function setTimeout(time: number) {\n  return new Promise<void>((resolve) => {\n    window.setTimeout(() => {\n      resolve();\n    }, time);\n  });\n}\n\nexport enum StzhEnvironmentEnum {\n  UNKNOWN = \"UNKNOWN\",\n  DEV = \"DEV\",\n  UAT = \"UAT\",\n  PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n  const url = window.location.href;\n  if (\n    url.includes(\"test.stadt-zuerich.loc\") ||\n    url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.DEV;\n  } else if (\n    url.includes(\"integ.stadt-zuerich.ch\") ||\n    url.includes(\"stzh-desi-unic-preview.netlify.app\") ||\n    url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.UAT;\n  } else if (\n    url.includes(\"https://www.stadt-zuerich.ch\") ||\n    url.includes(\"designsystem.stadt-zuerich.ch\") ||\n    url.match(/\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.PROD;\n  } else {\n    return StzhEnvironmentEnum.UNKNOWN;\n  }\n}\n\nexport function addWordBreakToLinks(links: HTMLElement[]) {\n  links.forEach((link) => {\n    if (link.textContent?.includes(\"_\")) {\n      link.innerHTML = link.textContent.replace(/_/g, \"_<wbr>\");\n    }\n  });\n}\n\nexport function getTheme() {\n  const htmlElement = document.documentElement;\n  return Array.from(htmlElement.classList).find(className => className.startsWith(\"stzh-theme-\"));\n}\n"],"version":3}

package/dist/collection/components/CMS/VBZ/stzh-vbz-intro/stzh-vbz-intro.css

@@ -163,17 +163,17 @@
 
 /**
 * @prop --background-color: Background color of top news section
-* @prop --background-color-mostsearched: Background color of top most searched section
+* @prop --mostsearched-background-color: Background color of top most searched section
 *
 * @prop --stzh-vbz-intro-subtitle-font: **Global**: Font of the topnews subtitle
 * @prop --stzh-vbz-intro-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle
 * @prop --stzh-vbz-intro-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)
 */
 :host {
-  --background-color-topnews: var(--stzh-topnews-background-color);
-  --background-color-mostsearched: var(--stzh-mostsearched-background-color);
-  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, var(--stzh-font-family-medium));
+  --mostsearched-background-color: var(--stzh-mostsearched-background-color);
+  --topnews-background-color: var(--stzh-topnews-background-color);
   --topnews-item-subtitle-color: var(--stzh-vbz-intro-topnews-item-subtitle-color, var(--stzh-color-primary70));
+  --topnews-item-subtitle-font: var(--stzh-vbz-intro-topnews-subtitle-font, var(--stzh-font-family-medium));
   --topnews-item-subtitle-highlighted-color: var(--stzh-vbz-intro-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));
   --grid-template-areas: "ticker ticker ticker ticker" "quicklinks quicklinks quicklinks quicklinks";
 }

package/dist/collection/components/CMS/stzh-card-superteaser/stzh-card-superteaser.css

@@ -168,9 +168,15 @@
   --service-background-color: var(--stzh-color-secondary30);
   --service-color: var(--stzh-color-primary70);
   --placeholder-image-color: var(--stzh-color-grey30);
+  --hover-background-color: var(--stzh-card-superteaser-hover-background-color, var(--stzh-color-secondary10));
   --grid-template-areas: "heading" "description" "meta";
   --grid-template-rows: repeat(2, auto) minmax(0, 1fr);
   --grid-template-columns: minmax(0, 1fr);
+  --tag-color: var(--stzh-card-superteaser-tag-color);
+  --tag-color-hover: var(--stzh-card-superteaser-tag-color-hover, var(--stzh-color-secondary60));
+  --tag-background-color: var(--stzh-card-superteaser-tag-background-color);
+  --heading-margin-bottom: var(--stzh-card-superteaser-heading-margin-bottom, var(--stzh-space-small));
+  --heading-link-color: var(--stzh-card-superteaser-heading-link-color, var(--stzh-color-primary70));
   display: grid;
 }
 :host ::slotted(img) {
@@ -263,6 +269,8 @@
   z-index: 2;
 }
 .stzh-card-superteaser__tag {
+  --stzh-tag-color: var(--tag-color);
+  --stzh-tag-background-color: var(--tag-background-color);
   position: absolute;
   left: 0;
   top: 0;
@@ -298,8 +306,8 @@
   margin-bottom: var(--stzh-space-xxsmall);
 }
 .stzh-card-superteaser__heading {
-  margin-top: 0px;
-  margin-bottom: var(--stzh-space-small);
+  margin-top: 0;
+  margin-bottom: var(--heading-margin-bottom);
 }
 .stzh-card-superteaser__heading-link {
   font-family: var(--stzh-font-family-title);
@@ -309,7 +317,7 @@
   line-height: var(--stzh-font-curve-teaser-default-text-line-height, var(--stzh-font-centi-text-line-height));
   letter-spacing: var(--stzh-font-curve-teaser-default-text-letter-spacing);
   display: block;
-  color: var(--stzh-color-primary70);
+  color: var(--heading-link-color);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
@@ -400,10 +408,10 @@
   z-index: 10;
 }
 .stzh-card-superteaser--has-link:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__heading-link::before {
-  background-color: var(--stzh-color-secondary10);
+  background-color: var(--hover-background-color);
 }
 .stzh-card-superteaser--has-link:has(.stzh-card-superteaser__heading-link:hover) .stzh-card-superteaser__tag {
-  --color: var(--stzh-color-secondary60);
+  --color: var(--tag-color-hover);
 }
 .stzh-card-superteaser--has-tag .stzh-card-superteaser__heading-wrapper {
   margin-top: var(--stzh-space-xxxlarge);

package/dist/collection/components/CMS/stzh-homepage-service-highlights/stzh-homepage-service-highlights.css

@@ -162,18 +162,21 @@
 }
 
 /**
-* @prop --background-color-topnews: Background color of top news section
-* @prop --background-color-mostsearched: Background color of top most searched section
+* @prop --topnews-background-color: Background color of top news section
+* @prop --mostsearched-background-color: Background color of top most searched section
 *
 * @prop --stzh-homepage-service-highlights-topnews-subtitle-font: **Global**: Font of the topnews subtitle
 * @prop --stzh-homepage-service-highlights-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle
 * @prop --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)
 */
 :host {
-  --background-color-topnews: var(--stzh-topnews-background-color);
-  --background-color-mostsearched: var(--stzh-mostsearched-background-color);
-  --topnews-item-subtitle-font: var(--stzh-homepage-service-highlights-topnews-subtitle-font, var(--stzh-font-family-medium));
+  --mostsearched-background-color: var(--stzh-homepage-service-highlights-mostsearched-background-color, var(--stzh-mostsearched-background-color));
+  --mostsearched-item-font-size: var(--stzh-homepage-service-highlights-mostsearched-item-font-size, "inherit");
+  --topnews-background-color: var(--stzh-homepage-service-highlights-topnews-background-color, var(--stzh-topnews-background-color));
+  --topnews-background-color-hover: var(--stzh-homepage-service-highlights-topnews-background-color-hover, var(--stzh-color-secondary40));
+  --topnews-color-hover: var(--stzh-homepage-service-highlights-topnews-hover, var(--stzh-color-primary70));
   --topnews-item-subtitle-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-color, var(--stzh-color-primary70));
+  --topnews-item-subtitle-font: var(--stzh-homepage-service-highlights-topnews-subtitle-font, var(--stzh-font-family-medium));
   --topnews-item-subtitle-highlighted-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));
 }
 
@@ -263,7 +266,7 @@
   text-decoration: none;
 }
 .stzh-homepage-service-highlights .stzh-topnews-item--has-link:hover {
-  background-color: var(--stzh-color-secondary40);
+  background-color: var(--topnews-background-color-hover);
 }
 .stzh-homepage-service-highlights .stzh-topnews-item--highlighted {
   background-color: var(--stzh-color-lemonyellow50);
@@ -282,13 +285,13 @@
   --color: var(--stzh-color-primary80);
 }
 .stzh-homepage-service-highlights .stzh-topnews-item--highlighted:hover .stzh-topnews-item__subtitle {
-  --color: var(--stzh-color-primary70);
+  --color: var(--topnews-color-hover);
 }
 .stzh-homepage-service-highlights__topnews {
-  background-color: var(--background-color-topnews);
+  background-color: var(--topnews-background-color);
 }
 .stzh-homepage-service-highlights__mostsearched {
-  background-color: var(--background-color-mostsearched);
+  background-color: var(--mostsearched-background-color);
   padding-top: var(--stzh-space-medium);
   padding-right: var(--stzh-space-large);
   padding-bottom: var(--stzh-space-medium);
@@ -387,6 +390,11 @@
   --hover-color: $linkColor;
   transition: transform 150ms ease;
 }
+@media screen and (min-width: 900px) {
+  .stzh-homepage-service-highlights .stzh-mostsearched-item__link {
+    --font-size: var(--mostsearched-item-font-size);
+  }
+}
 .stzh-homepage-service-highlights .stzh-mostsearched-item__link:hover {
   transform: translateX(0.625rem);
 }

package/dist/collection/components/CMS/stzh-homepage-service-highlights/stzh-homepage-service-highlights.js

@@ -1,4 +1,5 @@
 import { Fragment, h, Host } from "@stencil/core";
+import { getTheme } from "../../../utils/utils";
 export class StzhHomepageServiceHighlights {
     constructor() {
         this._topnewsItems = [];
@@ -6,9 +7,16 @@ export class StzhHomepageServiceHighlights {
         this.init = () => {
             this.topnewsItemsWatcher(this.topnewsItems);
             this.mostsearchedItemsWatcher(this.mostsearchedItems);
+            const theme = getTheme();
+            switch (theme) {
+                case "stzh-theme-pkzh":
+                    this.topnewsHeadingCurve = "h4";
+                    break;
+            }
         };
         this.topnewsItems = [];
         this.mostsearchedItems = [];
+        this.topnewsHeadingCurve = "h2";
     }
     topnewsItemsWatcher(newValue) {
         if (!newValue) {
@@ -63,22 +71,22 @@ export class StzhHomepageServiceHighlights {
         this.init();
     }
     renderTopnewsItemInner(item) {
-        return (h(Fragment, null, !!item.subtitle && h("stzh-text", { class: "stzh-topnews-item__subtitle" }, item.subtitle), h("stzh-heading", { class: "stzh-topnews-item__label" }, item.label)));
+        return (h(Fragment, null, !!item.subtitle && h("stzh-text", { class: "stzh-topnews-item__subtitle" }, item.subtitle), h("stzh-heading", { class: "stzh-topnews-item__label", curve: this.topnewsHeadingCurve }, item.label)));
     }
     render() {
         const classes = {
             "stzh-homepage-service-highlights": true,
-            "stzh-homepage-service-highlights--has-topnews": this._topnewsItems.length > 0,
+            "stzh-homepage-service-highlights--has-topnews": this._topnewsItems.length > 0
         };
-        return (h(Host, { key: '0ff530f9d151a87452ce53e524f6ffaac22ac5d5' }, h("div", { key: '94f208511b2f642bc53e5149ab89bd7bf30af74e', class: classes }, this._topnewsItems.length > 0 && (h("div", { key: 'bb632e73ab27cf89a66e27a6b7a29465eba366d3', class: "stzh-homepage-service-highlights__topnews" }, this._topnewsItems.map(item => !!item.href ? (h("a", { href: item.href, class: {
+        return (h(Host, { key: '268db718f245653c55d5afbb9b9cdeb16f68f3f9' }, h("div", { key: 'b3f1b54295b4ff8ed4c17ce662b74d521fcef438', class: classes }, this._topnewsItems.length > 0 && (h("div", { key: 'f62881e40b7bd3b2c764a2fafd6fab22255b58ed', class: "stzh-homepage-service-highlights__topnews" }, this._topnewsItems.map(item => !!item.href ? (h("a", { href: item.href, class: {
                 "stzh-topnews-item": true,
                 "stzh-topnews-item--highlighted": item.isHighlighted,
-                "stzh-topnews-item--has-link": true,
+                "stzh-topnews-item--has-link": true
             } }, this.renderTopnewsItemInner(item))) : (h("div", { class: {
                 "stzh-topnews-item": true,
-                "stzh-topnews-item--highlighted": item.isHighlighted,
-            } }, this.renderTopnewsItemInner(item)))))), this._mostsearchedItems.length > 0 && (h("div", { key: '1b673b948e2205b459cd49b7d95cb3d5469c8b59', class: "stzh-homepage-service-highlights__mostsearched" }, this._mostsearchedItems.map(item => (h("div", { class: {
-                "stzh-mostsearched-item": true,
+                "stzh-topnews-item--highlighted": item.isHighlighted
+            } }, this.renderTopnewsItemInner(item)))))), this._mostsearchedItems.length > 0 && (h("div", { key: 'cae6ea53b1d32c456da18afd9e21e1f792dee6aa', class: "stzh-homepage-service-highlights__mostsearched" }, this._mostsearchedItems.map(item => (h("div", { class: {
+                "stzh-mostsearched-item": true
             } }, h("stzh-link", { class: "stzh-mostsearched-item__link", href: item.href, icon: "arrow-right" }, item.label)))))))));
     }
     static get is() { return "stzh-homepage-service-highlights"; }
@@ -145,6 +153,11 @@ export class StzhHomepageServiceHighlights {
             }
         };
     }
+    static get states() {
+        return {
+            "topnewsHeadingCurve": {}
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

package/dist/collection/components/CMS/stzh-homepage-service-highlights/stzh-homepage-service-highlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-homepage-service-highlights.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQnF,MAAM,OAAO,6BAA6B;;QAKhC,kBAAa,GAAsB,EAAE,CAAC;QAItC,uBAAkB,GAA2B,EAAE,CAAC;QAkDhD,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxD,CAAC,CAAC;4BA1DiD,EAAE;iCAIQ,EAAE;;IAI/D,mBAAmB,CAAC,QAAoC;QACtD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;QAC1B,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxC,IAAI,CAAC;gBACH,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;YAC1D,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;YAC1B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAGD,wBAAwB,CAAC,QAAyC;QAChE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;QAC/B,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxC,IAAI,CAAC;gBACH,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACjD,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,qBAAqB,CAAC,KAAwB;QACpD,IAAI,gBAAgB,GAAG,KAAK,CAAC;QAE7B,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACtB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACtB,gBAAgB,GAAG,IAAI,CAAC;oBACxB,OAAO,IAAI,CAAC;gBACd,CAAC;qBAAM,CAAC;oBACN,yCAAyC;oBACzC,uCAAY,IAAI,KAAE,aAAa,EAAE,KAAK,IAAG;gBAC3C,CAAC;YACH,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEO,sBAAsB,CAAC,IAAqB;QAClD,OAAO,CACL,EAAC,QAAQ;YACN,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,iBAAW,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,QAAQ,CAAa;YAC9F,oBAAc,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,KAAK,CAAgB,CACjE,CACZ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,kCAAkC,EAAE,IAAI;YACxC,+CAA+C,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;SAC/E,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO;gBAChB,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,4DAAK,KAAK,EAAC,2CAA2C,IACnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC7B,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE;wBACL,mBAAmB,EAAE,IAAI;wBACzB,gCAAgC,EAAE,IAAI,CAAC,aAAa;wBACpD,6BAA6B,EAAE,IAAI;qBACpC,IAEA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAChC,CACL,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAE;wBACL,mBAAmB,EAAE,IAAI;wBACzB,gCAAgC,EAAE,IAAI,CAAC,aAAa;qBACrD,IAEA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAC9B,CACP,CACF,CACG,CACP;gBACA,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACrC,4DAAK,KAAK,EAAC,gDAAgD,IACxD,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACnC,WACE,KAAK,EAAE;wBACL,wBAAwB,EAAE,IAAI;qBAC/B;oBAED,iBAAW,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,IACjF,IAAI,CAAC,KAAK,CACD,CACR,CACP,CAAC,CACE,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhMostsearchedItem, StzhTopnewsItem } from \"../../../index\";\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true,\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\">{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true,\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-homepage-service-highlights.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-homepage-service-highlights/stzh-homepage-service-highlights.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { Font, StzhMostsearchedItem, StzhTopnewsItem } from \"../../../index\";\nimport { getTheme } from \"../../../utils/utils\";\nimport Curves = Font.Curves;\n\n@Component({\n  tag: \"stzh-homepage-service-highlights\",\n  styleUrl: \"stzh-homepage-service-highlights.scss\",\n  scoped: true\n})\nexport class StzhHomepageServiceHighlights {\n  @Element() element: HTMLStzhHomepageServiceHighlightsElement;\n\n  /** Top news items */\n  @Prop() topnewsItems: StzhTopnewsItem[] | string = [];\n  private _topnewsItems: StzhTopnewsItem[] = [];\n\n  /** Most searched items */\n  @Prop() mostsearchedItems: StzhMostsearchedItem[] | string = [];\n  private _mostsearchedItems: StzhMostsearchedItem[] = [];\n\n  @State() topnewsHeadingCurve: Curves = \"h2\";\n\n  @Watch(\"topnewsItems\")\n  topnewsItemsWatcher(newValue: StzhTopnewsItem[] | string) {\n    if (!newValue) {\n      this._topnewsItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        const parsed = JSON.parse(newValue);\n        this._topnewsItems = this.ensureSingleHighlight(parsed);\n      } catch (e) {\n        this._topnewsItems = [];\n      }\n    } else {\n      this._topnewsItems = this.ensureSingleHighlight(newValue);\n    }\n  }\n\n  @Watch(\"mostsearchedItems\")\n  mostsearchedItemsWatcher(newValue: StzhMostsearchedItem[] | string) {\n    if (!newValue) {\n      this._mostsearchedItems = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._mostsearchedItems = JSON.parse(newValue);\n      } catch (e) {\n        this._mostsearchedItems = [];\n      }\n    } else {\n      this._mostsearchedItems = newValue;\n    }\n  }\n\n  private ensureSingleHighlight(items: StzhTopnewsItem[]): StzhTopnewsItem[] {\n    let foundHighlighted = false;\n\n    return items.map(item => {\n      if (item.isHighlighted) {\n        if (!foundHighlighted) {\n          foundHighlighted = true;\n          return item;\n        } else {\n          // Remove highlight from subsequent items\n          return { ...item, isHighlighted: false };\n        }\n      }\n      return item;\n    });\n  }\n\n  private init = () => {\n    this.topnewsItemsWatcher(this.topnewsItems);\n    this.mostsearchedItemsWatcher(this.mostsearchedItems);\n    const theme = getTheme();\n    switch (theme) {\n      case \"stzh-theme-pkzh\":\n        this.topnewsHeadingCurve = \"h4\";\n        break;\n    }\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  private renderTopnewsItemInner(item: StzhTopnewsItem): HTMLElement {\n    return (\n      <Fragment>\n        {!!item.subtitle && <stzh-text class=\"stzh-topnews-item__subtitle\">{item.subtitle}</stzh-text>}\n        <stzh-heading class=\"stzh-topnews-item__label\" curve={this.topnewsHeadingCurve}>{item.label}</stzh-heading>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-homepage-service-highlights\": true,\n      \"stzh-homepage-service-highlights--has-topnews\": this._topnewsItems.length > 0\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._topnewsItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__topnews\">\n              {this._topnewsItems.map(item =>\n                !!item.href ? (\n                  <a\n                    href={item.href}\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted,\n                      \"stzh-topnews-item--has-link\": true\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </a>\n                ) : (\n                  <div\n                    class={{\n                      \"stzh-topnews-item\": true,\n                      \"stzh-topnews-item--highlighted\": item.isHighlighted\n                    }}\n                  >\n                    {this.renderTopnewsItemInner(item)}\n                  </div>\n                )\n              )}\n            </div>\n          )}\n          {this._mostsearchedItems.length > 0 && (\n            <div class=\"stzh-homepage-service-highlights__mostsearched\">\n              {this._mostsearchedItems.map(item => (\n                <div\n                  class={{\n                    \"stzh-mostsearched-item\": true\n                  }}\n                >\n                  <stzh-link class=\"stzh-mostsearched-item__link\" href={item.href} icon={\"arrow-right\"}>\n                    {item.label}\n                  </stzh-link>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/CMS/stzh-page-skiplinks/stzh-page-skiplinks.e2e.js

@@ -12,7 +12,7 @@ test.describe("page-skiplinks", () => {
                 page,
                 url: URL,
                 onBefore: async (page) => {
-                    const skiplink = await page.locator("stzh-skiplink");
+                    const skiplink = await page.locator("stzh-page-skiplinks");
                     await skiplink.first().focus();
                 }
             });

package/dist/collection/components/CMS/stzh-page-skiplinks/stzh-page-skiplinks.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-page-skiplinks.e2e.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-page-skiplinks/stzh-page-skiplinks.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,GAAG,GAAG,0BAA0B,CAAC;AAEvC,MAAM,OAAO,GAAG;IACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IACnC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;gBACR,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;oBACvB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;oBACrD,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;gBACjC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../../.build/test/utils\";\n\nconst URL = \"components-pageskiplinks\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"page-skiplinks\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n        onBefore: async (page) => {\n          const skiplink = await page.locator(\"stzh-skiplink\");\n          await skiplink.first().focus();\n        }\n      });\n    });\n  });\n});\n"]}
+{"version":3,"file":"stzh-page-skiplinks.e2e.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-page-skiplinks/stzh-page-skiplinks.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,GAAG,GAAG,0BAA0B,CAAC;AAEvC,MAAM,OAAO,GAAG;IACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IACnC,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;YACtD,MAAM,UAAU,CAAC;gBACf,OAAO;gBACP,IAAI;gBACJ,GAAG,EAAE,GAAG;gBACR,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;oBACvB,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;oBAC3D,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;gBACjC,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../../.build/test/utils\";\n\nconst URL = \"components-pageskiplinks\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"page-skiplinks\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n        onBefore: async (page) => {\n          const skiplink = await page.locator(\"stzh-page-skiplinks\");\n          await skiplink.first().focus();\n        }\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/CMS/stzh-pagetitle-home/stzh-pagetitle-home.css

@@ -179,12 +179,12 @@
   --color: var(--stzh-pagetitle-home-heading-color, var(--stzh-heading-color));
 }
 :host ::slotted([slot=readspeaker]) * {
-  --color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));
-  --hover-color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-heading-color));
+  --color: var(--stzh-pagetitle-home-readspeaker-color, var(--stzh-heading-color));
+  --hover-color: var(--stzh-pagetitle-home-readspeaker-color, var(--stzh-heading-color));
 }
 :host[has-image] ::slotted([slot=readspeaker]) * {
-  --color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));
-  --hover-color: var(--stzh-pagetitle-home-subheading-color, var(--stzh-color-white));
+  --color: var(--stzh-pagetitle-home-readspeaker-color, var(--stzh-color-white));
+  --hover-color: var(--stzh-pagetitle-home-readspeaker-color, var(--stzh-color-white));
 }
 :host[has-image] ::slotted([slot=heading]) {
   --color: var(--stzh-pagetitle-home-heading-color, var(--stzh-color-lemonyellow50));

package/dist/collection/components/CMS/stzh-pagetitle-home/stzh-pagetitle-home.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { hasSlot, setPropsIfNull } from "../../../utils/utils";
+import { getTheme, hasSlot, setPropsIfNull } from "../../../utils/utils";
 import { addMediaChangeListener, media, removeMediaChangeListener } from "../../../utils/media-utils";
 /**
  * @slot heading - Slot for `stzh-heading` element
@@ -13,13 +13,23 @@ export class StzhPagetitleHome {
             this.isSmall = media("small").matches;
         };
         this.init = () => {
-            const heading = this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');
-            const subheading = this.element.querySelector('stzh-text[slot="subheading"], [slot="subheading"] stzh-text');
-            const readspeakerButton = this.element.querySelector('[slot="readspeaker"] stzh-button');
+            const heading = this.element.querySelector("stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading");
+            const subheading = this.element.querySelector("stzh-text[slot=\"subheading\"], [slot=\"subheading\"] stzh-text");
+            const readspeakerButton = this.element.querySelector("[slot=\"readspeaker\"] stzh-button");
+            const theme = getTheme();
+            // Base config
+            let headingCurve = "h1home";
+            let subheadingCurve = "hero";
+            switch (theme) {
+                case "stzh-theme-pkzh":
+                    headingCurve = "h1homesmall";
+                    subheadingCurve = "h2";
+                    break;
+            }
             if (heading) {
                 setPropsIfNull(heading, {
-                    curve: "h1home",
-                    level: "1",
+                    curve: headingCurve,
+                    level: "1"
                 });
             }
             if (readspeakerButton) {
@@ -29,13 +39,13 @@ export class StzhPagetitleHome {
                     noPaddingRight: true,
                     size: "small",
                     sizeMedium: "tiny",
-                    buttonAccesskey: "L",
+                    buttonAccesskey: "L"
                 });
             }
             if (subheading) {
                 setPropsIfNull(subheading, {
-                    curve: "hero",
-                    lead: true,
+                    curve: subheadingCurve,
+                    lead: true
                 });
             }
         };
@@ -61,9 +71,9 @@ export class StzhPagetitleHome {
             "stzh-pagetitle-home--has-no-image": !imageSlotUsed,
             "stzh-pagetitle-home--has-subheading": subheadingSlotUsed,
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
-            "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
+            "stzh-pagetitle-home--has-meta": readspeakerSlotUsed
         };
-        return (h(Host, { key: 'a7e76ca4a9ee89beeaef14c9bee6b34756a8ea70', "has-image": imageSlotUsed }, h("div", { key: 'bea420e60b3902b5d372b675bebf1bfc9304e755', class: classes }, h("div", { key: 'd02a78188375c62bbe9de3e6117db7b55cfff96b', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '2e1fb9d107abd671a20b28a9f8d9197f07fe2b9f', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '17eb9d3a6079980c6a2678f9242b9d1139b75d89', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'f0b56741b9eade8a383907d87c4aaaeee098afc8', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: 'f26c6d3f98d9c5bc1743547e5ef884317f23fd86', name: "image" }))), h("div", { key: '687757d6d23fff7ec07c34f7d4a273d22b990188', class: "stzh-pagetitle-home__container" }, h("div", { key: '8e4bfecc07271bb5beda7339bca73af9ee6b57fd', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: 'a6429e57815d633eb5ee13b5621ecce5f719b163', class: "stzh-pagetitle-home__text" }, h("div", { key: 'c92f6c72cc1e278cc75a67ca11a83a670113ea32', class: "stzh-pagetitle-home__meta" }, h("div", { key: '55e6f831510c0506bc7b516b2466cdbe8b8f369b', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '151aae40e2bf7b49448294d3eb233677c9d3aa23', name: "readspeaker" }))), h("div", { key: 'd2829141894bbfd69460d70c5c61fd0c89863853', class: "stzh-pagetitle-home__heading" }, h("slot", { key: 'eb6460b898d330c36e8e184b01579bf90793832d', name: "heading" })), h("div", { key: 'a646ce4b1bb826e8a9323f336f6a4109fada7c32', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'efaebfd5802ea9e9d6720ef4c4906738a838a6af', name: "subheading" }))))))));
+        return (h(Host, { key: '28222b9dcbf38617ddd061bf4bd61dbfc8b422e8', "has-image": imageSlotUsed }, h("div", { key: '60102f19cc608e58123f4454e75e74c747ac50f7', class: classes }, h("div", { key: '6d9f0e68cd781e067b22c17fd57640ffba6dc39e', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '597d7f30f854a288e484dadf5f06a5efa97b9a50', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '0331aca53fc854aeb288b35d91e6fd8eed36bd86', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'c0c3c89d844bb3ff9e659eda509bad01e73bceab', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '20375f98cd00ba74c5da41c49f4eb90e0f23101a', name: "image" }))), h("div", { key: '3e120667008896afe9a4b92bc49091d6db123e9f', class: "stzh-pagetitle-home__container" }, h("div", { key: '04d3efcc4301a7d103993fb49acb0a972e7c4bbc', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: 'd974e083ff43924e1952407f279ee0b85dd4651d', class: "stzh-pagetitle-home__text" }, h("div", { key: '8434e16fb26078b1e5a4e5ca4b4924520c9c5018', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'f7b5e0279d6672eb2e8e580e4326ebd88d1a1746', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'aa8d41a5dcaa336ccd278cc453d9521f9d788eb4', name: "readspeaker" }))), h("div", { key: 'd925128907deeea6882cb9edff581f86ef126514', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '91b54d94ba286f781a67cf20b275761f5f6023bf', name: "heading" })), h("div", { key: '4644887eedae9f0fd875f75b06c43ba5be9d1094', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: '6525df6fe9a447fc482f39f79ffeed556798b08f', name: "subheading" }))))))));
     }
     static get is() { return "stzh-pagetitle-home"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/CMS/stzh-pagetitle-home/stzh-pagetitle-home.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-pagetitle-home.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-pagetitle-home/stzh-pagetitle-home.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot subheading - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle-home\",\n  styleUrl: \"stzh-pagetitle-home.scss\",\n  scoped: true,\n})\nexport class StzhPagetitleHome {\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  @Element() element: HTMLStzhPagetitleHomeElement;\n\n  @State() isSmall: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const subheading = this.element.querySelector('stzh-text[slot=\"subheading\"], [slot=\"subheading\"] stzh-text');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"h1home\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    if (subheading) {\n      setPropsIfNull(subheading, {\n        curve: \"hero\",\n        lead: true,\n      } as HTMLStzhTextElement);\n    }\n  };\n\n  componentDidRender() {}\n\n  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const subheadingSlotUsed = hasSlot(this.element, \"subheading\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle-home\": true,\n      \"stzh-pagetitle-home--has-image\": imageSlotUsed,\n      \"stzh-pagetitle-home--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle-home--has-subheading\": subheadingSlotUsed,\n      \"stzh-pagetitle-home--hyphens\": this.hyphensEnabled,\n      \"stzh-pagetitle-home--has-meta\": readspeakerSlotUsed,\n    };\n\n    return (\n      <Host has-image={imageSlotUsed}>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle-home__image-wrapper\">\n            <stzh-ratio\n              ratio={\"1:1\"}\n              ratioSmall={\"16:9\"}\n              ratioMedium={\"2:1\"}\n              ratioLarge={\"21:9\"}\n              class=\"stzh-pagetitle-home__ratio\"\n            ></stzh-ratio>\n            <div class=\"stzh-pagetitle-home__image-gradient\"></div>\n            <div class=\"stzh-pagetitle-home__image-inner-wrapper\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-pagetitle-home__container\">\n            <div class=\"stzh-pagetitle-home__wrapper\">\n              <div class=\"stzh-pagetitle-home__text\">\n                <div class=\"stzh-pagetitle-home__meta\">\n                  <div class=\"stzh-pagetitle-home__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__subheading\">\n                  <slot name=\"subheading\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-pagetitle-home.js","sourceRoot":"","sources":["../../../../../src/components/CMS/stzh-pagetitle-home/stzh-pagetitle-home.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State } from \"@stencil/core\";\n\nimport { getTheme, hasSlot, setPropsIfNull } from \"../../../utils/utils\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot subheading - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle-home\",\n  styleUrl: \"stzh-pagetitle-home.scss\",\n  scoped: true\n})\nexport class StzhPagetitleHome {\n  /** Automatic Hyphens */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  @Element() element: HTMLStzhPagetitleHomeElement;\n\n  @State() isSmall: boolean;\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector(\"stzh-heading[slot=\\\"heading\\\"], [slot=\\\"heading\\\"] stzh-heading\");\n    const subheading = this.element.querySelector(\"stzh-text[slot=\\\"subheading\\\"], [slot=\\\"subheading\\\"] stzh-text\");\n    const readspeakerButton = this.element.querySelector(\"[slot=\\\"readspeaker\\\"] stzh-button\");\n    const theme = getTheme();\n\n    // Base config\n    let headingCurve = \"h1home\";\n    let subheadingCurve = \"hero\";\n\n    switch (theme) {\n      case \"stzh-theme-pkzh\":\n        headingCurve = \"h1homesmall\";\n        subheadingCurve = \"h2\";\n        break;\n    }\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: headingCurve,\n        level: \"1\"\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\"\n      } as HTMLStzhButtonElement);\n    }\n\n    if (subheading) {\n      setPropsIfNull(subheading, {\n        curve: subheadingCurve,\n        lead: true\n      } as HTMLStzhTextElement);\n    }\n  };\n\n  componentDidRender() {}\n\n  connectedCallback() {\n    this.init();\n    this.mediaChangeHandler();\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const subheadingSlotUsed = hasSlot(this.element, \"subheading\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle-home\": true,\n      \"stzh-pagetitle-home--has-image\": imageSlotUsed,\n      \"stzh-pagetitle-home--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle-home--has-subheading\": subheadingSlotUsed,\n      \"stzh-pagetitle-home--hyphens\": this.hyphensEnabled,\n      \"stzh-pagetitle-home--has-meta\": readspeakerSlotUsed\n    };\n\n    return (\n      <Host has-image={imageSlotUsed}>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle-home__image-wrapper\">\n            <stzh-ratio\n              ratio={\"1:1\"}\n              ratioSmall={\"16:9\"}\n              ratioMedium={\"2:1\"}\n              ratioLarge={\"21:9\"}\n              class=\"stzh-pagetitle-home__ratio\"\n            ></stzh-ratio>\n            <div class=\"stzh-pagetitle-home__image-gradient\"></div>\n            <div class=\"stzh-pagetitle-home__image-inner-wrapper\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n          <div class=\"stzh-pagetitle-home__container\">\n            <div class=\"stzh-pagetitle-home__wrapper\">\n              <div class=\"stzh-pagetitle-home__text\">\n                <div class=\"stzh-pagetitle-home__meta\">\n                  <div class=\"stzh-pagetitle-home__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle-home__subheading\">\n                  <slot name=\"subheading\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.css

@@ -173,9 +173,10 @@
   --content-background: var(--stzh-accordion-content-background);
   --icon-size: var(--stzh-icon-size);
   --button-color: var(--stzh-accordion-button-color, var(--stzh-color-primary70));
-  --button-background-color: var(--stzh-color-secondary30);
+  --button-background-color: var(--stzh-accordion-button-background-color, var(--stzh-color-secondary30));
+  --button-background-color-is-open: var(--stzh-accordion-button-background-color-is-open, var(--stzh-color-secondary30));
   --hover-button-color: var(--button-color);
-  --hover-button-background-color: var(--stzh-color-secondary40);
+  --hover-button-background-color: var(--stzh-accordion-button-hover-background-color, var(--stzh-color-secondary40));
   --hover-trigger-color: var(--trigger-color);
   --transition-duration: 200ms;
 }
@@ -507,6 +508,9 @@
     margin-top: var(--stzh-space-xsmall);
   }
 }
+.stzh-accordion-item--is-open .stzh-accordion-item__button {
+  background-color: var(--button-background-color-is-open);
+}
 .stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before, .stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after {
   transform: rotate(0) translate(-50%, -50%);
 }