@oiz/stzh-components 4.5.0 → 4.6.0-beta1

package/dist/cjs/stzh-pi-teaser.cjs.entry.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-870b4dee.js');
+const utils = require('./utils-0ce5df06.js');
+require('./string-utils-45f764ac.js');
 
-const stzhPiTeaserCss = "@charset \"UTF-8\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-h, [stzh-hidden].sc-stzh-pi-teaser-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-h {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-coolgrey10)\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image \" \"text text text text \"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image\"\n        \"text text text text text text text text\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image image image image image\"\n        \"text text text text text text text text text text text text\"\n    );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text text image image image image image image\"\n    );\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text\";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text\";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-lead]) .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser.sc-stzh-pi-teaser {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser__text.sc-stzh-pi-teaser {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser > img.sc-stzh-pi-teaser {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser__dateline.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser__title-link.sc-stzh-pi-teaser {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser__date.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}";
+const stzhPiTeaserCss = ".sc-stzh-pi-teaser-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-pi-teaser-h,[stzh-hidden].sc-stzh-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-primary30)\n  );display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-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);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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)}}.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-teaser-default-font-size, var(--stzh-font-centi-font-size));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);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;color:var(--stzh-color-black);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1260px){.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-teaser-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-teaser-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-teaser-large-text-letter-spacing)}}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{display:block;font-family:inherit;padding:0;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{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);margin-top:0;margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xlarge)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}";
 const StzhPiTeaserStyle0 = stzhPiTeaserCss;
 
 const StzhPiTeaser = class {
@@ -23,26 +25,10 @@ const StzhPiTeaser = class {
         this.analyticsId = undefined;
         this.dateline = "";
         this.heading = "";
-        this.imageSrc = undefined;
         this.headingLevel = "3";
         this.lead = "";
         this.date = "";
-        this.contentSize = "M";
-        this.imagePosition = undefined;
-        this.isHero = undefined;
     }
-    // private truncateLead(text: string, max: number): string {
-    //   console.log(max);
-    //   if (!text) return "";
-    //   if (text.length <= max) return text;
-    //   let cut = text.slice(0, max);
-    //   const backtracked = cut.replace(/\s+\S*$/, "");
-    //   if (backtracked.length >= Math.floor(max * 0.6)) {
-    //     cut = backtracked;
-    //   }
-    //   cut = cut.replace(/[\s.,;:!?\-–—]+$/, "");
-    //   return cut + "…";
-    // }
     componentDidRender() {
         requestAnimationFrame(() => {
             var _a, _b;
@@ -55,20 +41,18 @@ const StzhPiTeaser = class {
     renderHeading() {
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? "a" : "button";
-        return (index.h("div", { class: "stzh-pi-teaser__title-wrapper" }, index.h(Heading, { class: "stzh-pi-teaser__title" }, index.h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
+        return (index.h("div", { class: "stzh-pi-teaser__title-wrapper" }, this.dateline && index.h("p", { class: "stzh-pi-teaser__dateline" }, this.dateline), index.h(Heading, { class: "stzh-pi-teaser__title" }, index.h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : index.h("slot", { name: "heading" }))))));
     }
     render() {
-        const hasLead = !!this.lead;
-        const hasImage = !!this.imageSrc && !!this.imagePosition;
-        const displayLead = this.lead;
-        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
-        // : "";
+        const hasLead = !!this.lead || utils.hasSlot(this.element, "lead");
+        const hasImageSlot = utils.hasSlot(this.element, "image");
+        const shouldRenderTitleRatio = !hasImageSlot;
         const classes = {
             "stzh-pi-teaser": true,
             "stzh-pi-teaser--has-lead": hasLead,
-            "stzh-pi-teaser--has-image": hasImage,
+            "stzh-pi-teaser--has-image": hasImageSlot,
         };
-        return (index.h(index.Host, { key: 'd9c3d58e879188890dd07823bb996f2de93651a2', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, index.h("article", { key: '47791c89f8cbe92744e387bf4cb8eba93c067ed4', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (index.h("div", { key: 'aa88aa3f4552a95cac98acdc505faf510d4fdde6', class: "stzh-pi-teaser__image" }, index.h("img", { key: '786a92cef49dcb7a37f472be30ea4d55710f204e', src: this.imageSrc, alt: "Example image" }))), index.h("div", { key: '0c49e95677fd68a72be31554fb4998a9b86ba08a', class: "stzh-pi-teaser__wrapper" }, index.h("div", { key: '324a03003b28d579fb46c7e047433b99e5ee453e', class: "stzh-pi-teaser__text" }, this.dateline && index.h("p", { key: 'e49a94c945e5d3e1e5a3d9efac84ef8550f8d310', class: "stzh-pi-teaser__dateline" }, this.dateline), this.renderHeading(), index.h("div", { key: '0623aadddea2c2e163abeb7b4495f475cf12f331', class: "stzh-pi-teaser__lead-wrapper" }, index.h("div", { key: 'a7ab6f1d9a5a785f758815a7599ba7f1534dd2d3', class: "stzh-pi-teaser__lead" }, displayLead)), this.date && index.h("div", { key: '79f7849f4585f3f60c918e9379c28efbcc5d026a', class: "stzh-pi-teaser__date" }, this.date))))));
+        return (index.h(index.Host, { key: 'aadddeb1b286ccdcaad715fb158836c64172859a', "has-lead": hasLead }, index.h("article", { key: 'f7732f31c853c62786b4f802e77a386aa7300f6b', class: classes, "aria-label": this.heading, role: "listitem" }, index.h("div", { key: '0600c3ba6eaffcfbc2adf7cd6bba047a10f603e2', class: "stzh-pi-teaser__image" }, index.h("stzh-ratio", { key: '47fedc1ec5622cfb4ef9c2f48ef326f3eeec46b9', ratio: "2:1" }, index.h("slot", { key: '109a0ef33b7a592e73189db1c822bf41e21c690b', name: "image" }))), shouldRenderTitleRatio && (index.h("stzh-ratio", { key: 'a635121bff26dd5e8a8f941651be7a02279c9c69', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), index.h("div", { key: '97a87ef704edf0808d6e825a9915ce2a7d78037e', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), index.h("div", { key: '83568e5e3bf19338ce8b733632a41c92f74adf34', class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" })), this.date && index.h("div", { key: '4940a979321c9896c976ae1fe3901810b15e1c00', class: "stzh-pi-teaser__date" }, this.date)))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pi-teaser.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,inYAAinY,CAAC;AAC1oY,2BAAe,eAAe;;MCajB,YAAY;;;;QAgDf,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBAvCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;;;;;;;;;;;;;;IAoCxD,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAC7C,QACEA,iBAAK,KAAK,EAAC,+BAA+B,IACxCA,QAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpCA,QAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAAG,IAAI,CAAC,OAAO,CAAO,CAC5E,CACJ,CACN,EACN;KACH;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;;QAI9B,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,OAAO;YACnC,2BAA2B,EAAE,QAAQ;SACtC,CAAC;QAEF,QACEA,QAACC,UAAI,iEAAW,OAAO,eAAa,QAAQ,oBAAkB,IAAI,CAAC,aAAa,kBAAgB,IAAI,CAAC,WAAW,IAC9GD,sEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAC/D,QAAQ,KACPA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,kEAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP,EAEDA,kEAAK,KAAK,EAAC,yBAAyB,IAClCA,kEAAK,KAAK,EAAE,sBAAsB,IAC/B,IAAI,CAAC,QAAQ,IAAIA,gEAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACxE,IAAI,CAAC,aAAa,EAAE,EACrBA,kEAAK,KAAK,EAAC,8BAA8B,IACvCA,kEAAK,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAO,CACjD,EACL,IAAI,CAAC,IAAI,IAAIA,kEAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACF,CACE,CACL,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Prop() isHero: boolean;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  // private truncateLead(text: string, max: number): string {\n  //   console.log(max);\n  //   if (!text) return \"\";\n  //   if (text.length <= max) return text;\n\n  //   let cut = text.slice(0, max);\n  //   const backtracked = cut.replace(/\\s+\\S*$/, \"\");\n  //   if (backtracked.length >= Math.floor(max * 0.6)) {\n  //     cut = backtracked;\n  //   }\n  //   cut = cut.replace(/[\\s.,;:!?\\-–—]+$/, \"\");\n  //   return cut + \"…\";\n  // }\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser__wrapper\">\n            <div class={\"stzh-pi-teaser__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser__lead-wrapper\">\n                <div class=\"stzh-pi-teaser__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,ytOAAytO,CAAC;AAClvO,2BAAe,eAAe;;MCcjB,YAAY;;;;QAqCf,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBA5ByB,EAAE;uBAGH,EAAE;4BAGkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;;IAkBzB,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAC7C,QACEA,iBAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,QAAQ,IAAIA,eAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACzEA,QAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpCA,QAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7BA,iBAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAGA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACI,CACJ,CACN,EACN;KACH;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAIC,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC7D,MAAM,YAAY,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACpD,MAAM,sBAAsB,GAAG,CAAC,YAAY,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,OAAO;YACnC,2BAA2B,EAAE,YAAY;SAC1C,CAAC;QAEF,QACED,QAACE,UAAI,iEAAW,OAAO,IACrBF,sEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAChEA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,yEAAY,KAAK,EAAC,KAAK,IACrBA,mEAAM,IAAI,EAAE,OAAO,GAAS,CACjB,CACT,EACL,sBAAsB,KACrBA,yEAAY,KAAK,EAAC,6BAA6B,EAAC,KAAK,EAAE,KAAK,IACzD,IAAI,CAAC,aAAa,EAAE,CACV,CACd,EACDA,kEAAK,KAAK,EAAC,yBAAyB,IACjC,CAAC,sBAAsB,IAAI,IAAI,CAAC,aAAa,EAAE,EAChDA,kEAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAGA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC1F,IAAI,CAAC,IAAI,IAAIA,kEAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACE,CACL,EACP;KACH;;;;;;;","names":["h","hasSlot","Host"],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorPrimary30}\n  );\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-teaser {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--stzh-color-white);\n\n  &__wrapper {\n    display: flex;\n    flex-grow: 1;\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0 0 var(--stzh-space-small);\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include fontCurve(\"teaser\");\n    @include wordWrap;\n\n    color: var(--stzh-color-black);\n    margin: 0;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3; /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis; /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontSize(\"milli\");\n    margin-top: 0;\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  &__date {\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    text-align: right;\n    width: 100%;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  &--has-image &__lead {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  /* Title ratio styling (no image) */\n  &__title-ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__title-ratio &__title-wrapper {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n  }\n\n  &__title-ratio &__dateline {\n    margin-bottom: var(--stzh-space-xxsmall);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\nimport { hasSlot } from \"../../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -38,7 +38,7 @@ const StzhPoicard = class {
         const classes = {
             "stzh-poicard": true,
         };
-        return (index.h(index.Host, { key: 'fd756d25f714586291f6257e067cdcb3a71d9962' }, index.h("a", { key: '680220b5958f56db3453c7e6700e3897d4c1d127', class: classes, href: this._item.url, target: "_blank" }, index.h("div", { key: '8fe3116fe188503fd750d2fcc895cc4a03fd461a', class: "stzh-poicard__content" }, index.h("div", { key: 'dcc00fe19a6f5426888b0ca8a87eb9a8011d1783', class: "stzh-poicard__content-head" }, index.h("stzh-heading", { key: '6c17f47680bab5f9091bcd2a2a42ae03e84272c9' }, this._item.title)), index.h("div", { key: 'dbf7996c15c0d651018479d2a4cd436c110220a8', class: "stzh-poicard__content-body" }, this._item.distance && (index.h("div", { key: 'bab8ab3fccdf82457e4383d263015e3e25bf0742', class: "stzh-poicard__content-with-icon" }, index.h("stzh-icon", { key: 'b146c076f1c6aa520a6c0eaf6a606a785deba4ab', name: "pin" }), index.h("stzh-text", { key: '0e41396cf91bff05276fe9da042a5ec97d9676f5' }, this._item.distance))), this._item.temp && (index.h("div", { key: '2741d9d23e1ccd37e9862ce27d305dbe3b51de5c', class: "stzh-poicard__content-with-icon" }, index.h("stzh-icon", { key: 'ba125601a25778d381883e447efffcc3ce8e6ad2', name: "thermometer" }), index.h("stzh-text", { key: '29ed34c8dd36617a94dc0b9abf0d433be4471b3d' }, this._item.temp))), (this._item.statusMessageContent || this._item.statusMessage) && (index.h("div", { key: '58ce3646878980ba7dc7a4286472c641f2415238', class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && index.h("stzh-text", { key: '25bb8733b1641ba78b1b3088b9e1387f615692bd', size: "milli" }, this._item.statusMessage), this._item.statusMessageContent && (index.h("stzh-chip", { key: 'cab5f3bd34c3db3385bb9352af35c53ca61eb412', variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
+        return (index.h(index.Host, { key: 'e652ba08e4f3ff94e863df38e310d78e76f44844' }, index.h("a", { key: 'f3196ec3550cadb829d5e3b7c4f0903917a1ed28', class: classes, href: this._item.url, target: "_blank" }, index.h("div", { key: '711ab9f916af075a2abad1ff745fa78eaff712ca', class: "stzh-poicard__content" }, index.h("div", { key: '708aadb932728bcf99508ca0a7bc7a63d2d4db44', class: "stzh-poicard__content-head" }, index.h("stzh-heading", { key: '7816aec4b6d453de2c50a0c8d459f1b330d0c5e0' }, this._item.title)), index.h("div", { key: '019d773b7de7150343075ebbcedf255d08c10227', class: "stzh-poicard__content-body" }, this._item.distance && (index.h("div", { key: '899d1110c0cf90d6186938ee71859ea1e06346dc', class: "stzh-poicard__content-with-icon" }, index.h("stzh-icon", { key: '27eabbdae6483bfe2cc37e57e09f41e2f6d8e694', name: "pin" }), index.h("stzh-text", { key: 'b696ad2178e7fa311437ebc8997ed53e369b72de' }, this._item.distance))), this._item.temp && (index.h("div", { key: '093190a0144b6b225a9e9710ca3d772d133b8c35', class: "stzh-poicard__content-with-icon" }, index.h("stzh-icon", { key: 'e2406b95acba85c071875a13c91911ea77ea76e9', name: "thermometer" }), index.h("stzh-text", { key: '49a8bef000e5b6b388423962078ae0dbcc1153ec' }, this._item.temp))), (this._item.statusMessageContent || this._item.statusMessage) && (index.h("div", { key: '1287e6f948859afc8b077c34cb28c9acaf9e8047', class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && index.h("stzh-text", { key: '6d73eaae36016d42866cb984667a47051d6b2133', size: "milli" }, this._item.statusMessage), this._item.statusMessageContent && (index.h("stzh-chip", { key: 'dd79e37445a32b0ae190e3c7cd0350523d967c86', variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -107,7 +107,7 @@ const StzhPoilist = class {
         const classes = {
             "stzh-poilist": true,
         };
-        return (index.h(index.Host, { key: '7d648ed46e8481ca8aaec8d2b37d44954b1a4de1' }, index.h("div", { key: '80559e594a82d6d7671165d3cf2add6f1d6ea8ac', class: classes }, index.h("stzh-overlay", { key: '2ee98f49b657df61a1e3e8dd890cb60ee465a9c9', open: this.isLoading }, index.h("stzh-loader", { key: '2af6824f0565b9a6c3a5585abf549cd3361b2637', label: this.loadingText })), this.geopositionError && index.h("stzh-message", { key: 'db6a3140e58c0e3d5f18194f81154f217130eb22', type: "error", label: this.geopositionError }), (this.items.length > 0 || this.meta) && (index.h(index.Fragment, { key: 'b1c3ee7415f8c7bb7ef505c574a061d7f9ffb4da' }, index.h("div", { key: 'eba2dd1034a949af1b1421a2144834415179f0ac', class: "stzh-poilist__header" }, index.h("stzh-text", { key: 'ad8881c73de849cd8d4351c1969ab461d3948a7b', size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), index.h("stzh-dropdown", { key: '453c84cd239904f33cc469dd5b20ade08a4592e4', label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting) ? this.activeSorting : [this.activeSorting], options: this.dropdownOptions })), index.h("stzh-cardlist", { key: 'bfcc59f45401faab89a930b37888f5a01c829390', layout: "teasers" }, this.items.map(item => (index.h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (index.h("div", { key: '54d2983e728c727933dde485bdf5ba5fa1dae2f6', class: "stzh-poilist__show-more" }, index.h("stzh-button", { key: '51d5a36230815c9982b182bfaec5e23ae9da9d56', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
+        return (index.h(index.Host, { key: '2cca93ed29e1c2b29cbdbd44da0162d8f4bf509c' }, index.h("div", { key: '704cc8ddc1704c60e9afdfbd8221ad591a855df9', class: classes }, index.h("stzh-overlay", { key: 'b40ddc942f967621d3e4ed9ac3ae6950419e05c1', open: this.isLoading }, index.h("stzh-loader", { key: '6f3449f95dfbd43a5b2b070c52055346ae61ccf7', label: this.loadingText })), this.geopositionError && index.h("stzh-message", { key: '7efaf270fb12bbe0471669abde2306dfc651267d', type: "error", label: this.geopositionError }), (this.items.length > 0 || this.meta) && (index.h(index.Fragment, { key: '05f2569d167029874bf7bcd75439692c18dd713a' }, index.h("div", { key: '0a48f839d41d4127630dae30de32e42b7fbe1738', class: "stzh-poilist__header" }, index.h("stzh-text", { key: '420a3cbee618f842a868102b8187c1c0d6d4a803', size: "micro" }, this.getNumberOfLoadedItems(), " ", this.localization.of, " ", this.meta.totalItems), index.h("stzh-dropdown", { key: '87d7f9b923682699fab487529a9c8cc3f8d93167', label: "Sortierung", "hide-optional": true, variant: "plain", noSearch: true, inline: true, noWrap: true, onStzhChange: this.onSortChange, items: Array.isArray(this.activeSorting) ? this.activeSorting : [this.activeSorting], options: this.dropdownOptions })), index.h("stzh-cardlist", { key: '99f70ed406799852713b9406559ba80a27c5f475', layout: "teasers" }, this.items.map(item => (index.h("stzh-poicard", { item: item })))), this.meta.currentPage !== this.meta.totalPages && (index.h("div", { key: 'f78b1be1bc0aded858987e3854a6b4efe964b79c', class: "stzh-poilist__show-more" }, index.h("stzh-button", { key: '2bbd8362bc26ccc73433e6173fcfee59fb9a8882', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -450,7 +450,7 @@ const StzhPopover = class {
             [`stzh-popover--${this.size}`]: !!this.size,
             [`stzh-popover--${this.variant}`]: !!this.variant,
         };
-        return (index.h(index.Host, { key: 'a19b38c19d77f75a2b730bfb14c48a83397ca1cd' }, index.h("div", { key: '719be2095d868e54a31371e52dc881ae465e1601', class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, ref: el => (this.rootElement = el) }, index.h("div", { key: '343b7469abb2ecd3331c92b6eb389f2d5dfbb323', ref: el => (this.triggerElement = el), class: "stzh-popover__trigger" }, index.h("slot", { key: 'd5d6bb3c2f83f3b1f5b9b5eca9650f43a2edd43e' })), index.h("div", { key: 'a473883cb7c168c9fa7f2615b7b652eaa1ddaa55', class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), index.h("div", { key: '09ffed2c8669e592630f4fd2a88e3067005c0376', ref: el => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, index.h("div", { key: '6940b597a568708e821fb1cfc7e161a2ed079613', class: "stzh-popover__backdrop" }), index.h("div", { key: 'bb6022a97243803b1f34406c9d6f77ebb4673eef', ref: el => (this.contentElement = el), class: "stzh-popover__content" }, index.h("div", { key: '7071bea44105ad39c9a6a1d1f752073c997ed000', ref: el => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" && (index.h("div", { key: '29113d754f000ababccf50b6fc1b63587119a670', class: "stzh-popover__arrow", ref: el => (this.arrowElement = el), innerHTML: arrow.Arrow })), index.h("div", { key: '259491190a868195a7d61dc17badb030707311ee', class: "stzh-popover__content-inner" }, index.h("div", { key: '69b2af7bba1806824da4a9d6fa6030f2a9625e5e', class: "stzh-popover__label-wrapper" }, index.h("h2", { key: '57d492779bc3b0586d234785cc887299a543e54b', id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : index.h("slot", { name: "label" })), index.h("button", { key: '74521dcdbf31186a297c3e58c185f792a7334c3f', class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, index.h("stzh-icon", { key: '771cc1c54f24d7eb663db08f009fc89b8c951501', name: "close", class: "stzh-popover__icon" }), index.h("span", { key: 'bc69fcf86963638745165d2d0970f31bb2401927', class: "stzh-popover__vhidden" }, this.localization.close))), index.h("div", { key: '322db085c610328c7d99e1b153e85eff483d9be3', class: "stzh-popover__content-slot-wrapper" }, index.h("div", { key: '4361d0354e844238d002155c6166b2bcd8f48362', class: "stzh-popover__content-slot" }, index.h("slot", { key: '12ed96107632809aceb5d6201fa31ca5e5cee515', name: "content" })), index.h("div", { key: '83fbdc7706a5e3f777e4a4f82bb5fe66da17bc7c', class: "stzh-popover__action-slot" }, index.h("slot", { key: 'c684392837ca341e175d107e8461fa60fb2a9510', name: "action" }))))))))));
+        return (index.h(index.Host, { key: '0d03d86b938159bd6957cccf64e8024e35f1ea8c' }, index.h("div", { key: '8c26bc71ec55405e345805eb765969969fa47eb2', class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd, ref: el => (this.rootElement = el) }, index.h("div", { key: '2c957363682656442de2699305e6afb806571741', ref: el => (this.triggerElement = el), class: "stzh-popover__trigger" }, index.h("slot", { key: 'db99eabc011884b33d4a4cc99a1ad789ce891fe1' })), index.h("div", { key: 'aaf4676146ef81531ffd46a0f6d962f01dfaed13', class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), index.h("div", { key: '67079817f493d3dfc837022d8fb38ee2fd09cb43', ref: el => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, index.h("div", { key: 'edc9522d20c6799f079027d5aee67059f938eb44', class: "stzh-popover__backdrop" }), index.h("div", { key: 'c697551a708d1e051163a1e54669c74c5edf7762', ref: el => (this.contentElement = el), class: "stzh-popover__content" }, index.h("div", { key: 'f9b52c577aa5e32a5e740a7e93573aacf2241911', ref: el => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" && (index.h("div", { key: '4916f5fe308b219817db7bb55b6891563bf0cb49', class: "stzh-popover__arrow", ref: el => (this.arrowElement = el), innerHTML: arrow.Arrow })), index.h("div", { key: 'cb007218fde98b2d6bfb46d973d8270b4c4f009b', class: "stzh-popover__content-inner" }, index.h("div", { key: '4dbdd6d0fe1a1ca925801acb85decd9dd84beca3', class: "stzh-popover__label-wrapper" }, index.h("h2", { key: '1363e6d92e66d9cec5e9f6185b2b0311e03ed6d7', id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : index.h("slot", { name: "label" })), index.h("button", { key: 'da892cbb69a413e38d23e9d12b67d3409a2b038c', class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, index.h("stzh-icon", { key: '2263f7539ad5708fdec4553dc6be19c8101f14a9', name: "close", class: "stzh-popover__icon" }), index.h("span", { key: '2048b82320d73b09d5018e7838da90c4d57b8bfe', class: "stzh-popover__vhidden" }, this.localization.close))), index.h("div", { key: '11b9d82d69767be653c9cbf26ef56d83ed7989e0', class: "stzh-popover__content-slot-wrapper" }, index.h("div", { key: '2a4956fe68ce46d11eef3b86df0d150a8c3d0455', class: "stzh-popover__content-slot" }, index.h("slot", { key: '6c020f92c68492df3d3841180bc99693e06082a8', name: "content" })), index.h("div", { key: '82a4dd34d008efd30bde12f26d07b2c1dc09a775', class: "stzh-popover__action-slot" }, index.h("slot", { key: '536cb7e90448fcd38d833178c73af0725d9cb728', name: "action" }))))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -42,7 +42,7 @@ const StzhPrint = class {
         const classes = {
             "stzh-print": true,
         };
-        return (index.h(index.Host, { key: '98e917d37294b13b41b4e89fda2061a247989602' }, index.h("div", { key: '63268633fbfb48e73cc4ba01061039e6ec03c57e', class: classes }, index.h("slot", { key: '028f44aedf5543913b6a12478b7d586587c84183' }))));
+        return (index.h(index.Host, { key: 'a80e391b692ee489cd4f53f98b1228f7aa09bfa3' }, index.h("div", { key: '9e96dc6264374944694681040e85e73480599f4a', class: classes }, index.h("slot", { key: 'e49ccc933f9cdba5dfaeffa5eaba8c66f929df07' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -129,7 +129,7 @@ const StzhShare = class {
                 icon: "xing",
             },
         };
-        return (index.h(index.Host, { key: '53eb919fed1d3d5df5938aa69ebb1f3fb2d6ba64' }, index.h("div", { key: '2f971bd90993f82ba34601c73de6fdfc3c19c324', class: classes }, index.h("ul", { key: 'cca310ea1c64fd7a107d647c9f1ddae30ea28ef8', class: "stzh-share__list" }, this._services.map(service => (index.h("li", { class: "stzh-share__item" }, index.h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, index.h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
+        return (index.h(index.Host, { key: '5ff252cebdf9e2aeef34cf3e8d77f7c93aa0e121' }, index.h("div", { key: '20a3cc2e0448cc29cda485f65c4b556cd2752b7e', class: classes }, index.h("ul", { key: '09e583e33c457c32006198ae5c942006f76d083f', class: "stzh-share__list" }, this._services.map(service => (index.h("li", { class: "stzh-share__item" }, index.h("stzh-tooltip", { content: serviceData[service].text, size: "small" }, index.h("stzh-button", { class: `stzh-share__button is-${service}`, size: "small", variant: "tertiary", iconOnly: true, href: serviceData[service].url, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? e => this.openPopup(serviceData[service].url, e) : null, analyticsId: serviceData[service].text, icon: serviceData[service].icon })))))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const StzhQuote = class {
         const classes = {
             "stzh-quote": true,
         };
-        return (index.h(index.Host, { key: '80f0191a46b9ef842720848f3e03e7aca9ec8732' }, index.h("div", { key: 'd0b7d3cd84ca330bf7f98ff4d2a17c6de4fbeb44', class: classes }, index.h("blockquote", { key: '0ff3585baeb20e3a25dcb5c3d4fa5edf408bd823', class: "stzh-quote__content" }, index.h("p", { key: '7377dccf033ad4e2bdbe9fb129a302bc8fc1b7ce', class: "stzh-quote__text" }, this.text), this.author && index.h("cite", { key: 'a4dcf2298cbc53916d6945c15a6e0677c24818a0', class: "stzh-quote__author" }, this.author)))));
+        return (index.h(index.Host, { key: 'e4d7e752f297cbad3bc3b2c1dcdfea9e4eefca7f' }, index.h("div", { key: '3a9aa76d2e97768a11532de9208f7f1604ef37d3', class: classes }, index.h("blockquote", { key: '6868330665a403b87843b2890613a3c56e46e693', class: "stzh-quote__content" }, index.h("p", { key: '44814da107f2d7a3363d51c9217f9bfb3c0c6938', class: "stzh-quote__text" }, this.text), this.author && index.h("cite", { key: '975ad30782d4af5a497e13da5864849f4f63d4ba', class: "stzh-quote__author" }, this.author)))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -22,7 +22,7 @@ const StzhRatio = class {
         const classes = {
             "stzh-ratio": true,
         };
-        return (index.h(index.Host, { key: '1510cd331194c10f92cf625a667530153ab95377' }, index.h("div", { key: '8f5a100be3b4852aadbad869c8e7315d9afec751', class: classes }, index.h("slot", { key: 'b742bae2a8098b1441de9909cc55c8b6c209c478', name: "image" }), index.h("slot", { key: 'c42417b89532473ccb0ed71aff62017e3a722d28' }))));
+        return (index.h(index.Host, { key: '8b21c97cf22e8a09933f76444ab120b4b4bd6209' }, index.h("div", { key: '1531f56313bc56cf041fbd988e2ec7645119fbac', class: classes }, index.h("slot", { key: 'f66bc6c071d9b449bcd2f3a4b6659c5606d4c427', name: "image" }), index.h("slot", { key: '01da559bb1612ef797cb6618a14249214475e0be' }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -199,9 +199,9 @@ const StzhReadspeaker = class {
             "stzh-readspeaker": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (index.h(index.Host, { key: '1fed775e78e1e5260c9fb94b978f71307c68f4eb' }, index.h("div", { key: '7536c8e78247039630992718b793b9307f37f58f', class: classes }, index.h("div", { key: '763eddb095116b79a2c143748b1c001cd0ab2a11', class: "stzh-readspeaker__actions" }, index.h("div", { key: 'ad3f1b43c42182d6adb2e9f0afdfc5934b5715a0', ref: el => (this.triggerElement = el), class: "stzh-readspeaker__trigger" }, index.h("slot", { key: 'e3f2e74edad1921fca5125844665966a8be0405a' })), index.h("stzh-button", { key: '15fd73b6999526164c40de6fe7848c1af3cea656', class: "stzh-readspeaker__close", variant: "tertiary", size: "small", icon: "close-big", iconOnly: true, onClick: () => {
+        return (index.h(index.Host, { key: '2d8790dfc7a953df03c22323b4d2c2733a3296d5' }, index.h("div", { key: '509a17b7224d2ee02247d3965f2c411c83c2f0f1', class: classes }, index.h("div", { key: '294da961202d486df9a5847b56c3105f905853be', class: "stzh-readspeaker__actions" }, index.h("div", { key: '9d83737e2a633e4ead480f8e84f46df9c84f56bb', ref: el => (this.triggerElement = el), class: "stzh-readspeaker__trigger" }, index.h("slot", { key: 'dfa4c42aa26a3620909fc9035b4fe4740716e224' })), index.h("stzh-button", { key: '907076bb64f296703476a06ab2c60f0bdeb86afc', class: "stzh-readspeaker__close", variant: "tertiary", size: "small", icon: "close-big", iconOnly: true, onClick: () => {
                 this.closePlayer();
-            } })), index.h("div", { key: '4a4a50236cefa8259622b9820f97b24c294e640c', id: this.readspeakerId, class: "rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp" }))));
+            } })), index.h("div", { key: '02038c3f5e4d6868c749d132c044b1cceff6c394', id: this.readspeakerId, class: "rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp" }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -70,8 +70,8 @@ const StzhSaptcha = class {
         const classes = {
             "stzh-saptcha": true,
         };
-        return (index.h(index.Host, { key: '7a4de4cd03aaca5db4d63f792ad78ed2e91e9708', "is-invalid": this.invalid || this._error.length > 0 }, index.h("div", { key: '613ce1ef0ead5f018bffb5638292e75b0c3c9afe', class: classes }, index.h("div", { key: '57528f95fc1ffbd4e02ecd4a27d7a15cdd559e36', class: "stzh-saptcha__box" }, index.h("div", { key: '8943738b7a358b5cefbadde013ed5630fc076b91', class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), index.h("div", { key: '6ddf39023f94384f0f04e44959062355fb85c9a5', class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index$1) => (index.h("span", { class: "stzh-saptcha__number" }, number, index$1 < this._numbers.length - 1 &&
-            (index$1 === this._numbers.length - 2 ? this.localization.answerOr : ", "))))), index.h("stzh-input", { key: '997f155023e2b332ae3db3f6601d3a5e804759c3', class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
+        return (index.h(index.Host, { key: '4e07d96b04e477b10895068a63ce7051d4b069fc', "is-invalid": this.invalid || this._error.length > 0 }, index.h("div", { key: '43c6c3a56116aae48d4710eb492d8d42543a2510', class: classes }, index.h("div", { key: '99bbce9cb5d20d461dfab80dfa28834dfbb7f52f', class: "stzh-saptcha__box" }, index.h("div", { key: '252f01b709c92c84f51dcab0862e5cf10dfce971', class: "stzh-saptcha__info", id: `${this.saptchaId}-info` }, this.localization.info, " ", this.localization.question), index.h("div", { key: 'ebf0c0aee4514e1160f9532df0ad8c6ee294380a', class: "stzh-saptcha__answer", id: `${this.saptchaId}-answer` }, this._numbers.map((number, index$1) => (index.h("span", { class: "stzh-saptcha__number" }, number, index$1 < this._numbers.length - 1 &&
+            (index$1 === this._numbers.length - 2 ? this.localization.answerOr : ", "))))), index.h("stzh-input", { key: '2f5294e2fa1b4496ec002d71a84349e183ec1e0c', class: "stzh-saptcha__input", label: this.localization.answer, name: this.name, invalid: this.invalid, error: this.error, disabled: this.disabled, value: this.value, onStzhChange: this.onInputChange, required: true, a11yDescribedby: `${this.saptchaId}-info ${this.saptchaId}-answer` })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -35,7 +35,7 @@ const StzhScrollup = class {
         const classes = {
             "stzh-scrollup": true,
         };
-        return (index.h(index.Host, { key: '294377ad20dac798ff9dcd8319caca6846e666fa' }, index.h("div", { key: 'c0f66b384e9362bd2239c3131ec147284ca3b1a5', class: classes }, index.h("slot", { key: '434c2a000bf5775f30466a973cd6832a179a288c', onSlotchange: this.handleSlotchange }))));
+        return (index.h(index.Host, { key: '25d05db7834097a9847f6ffc383096edec46407a' }, index.h("div", { key: '420bf5593e716079bb866b27ba1a5053a1703c66', class: classes }, index.h("slot", { key: 'd8d9d33461a9b313bb61cc2f9e519dd65e3fca90', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -481,13 +481,13 @@ const StzhSearch = class {
         const wrapperProps = typeof this.templateResultWrapperProps === "function"
             ? this.templateResultWrapperProps(this.element)
             : this.templateResultWrapperProps;
-        return (index.h(index.Host, { key: '442d6060b1f8c5aaf68996ea8d7450721fe02d00', "has-aside-filters": filtersAsideUsed, fullwidth: this.isStzhAnchornavVisible.toString() }, index.h("form", { key: '8a0667245417c0ca497cbd6ff22808f44af7d37f', ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, index.h("div", { key: 'f3ba90b6b3f2b2696c7a368e4820bb9db7dd3ad8', class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, !!this.heading && (index.h("stzh-heading", { key: 'dffb5098a90bdddde71ddca8ccd284106de2d4e3', class: "stzh-search__header-heading", curve: "h2" }, this.heading)), index.h("slot", { key: 'cc868f163c9add4f201fb90e456ead901f9e7d41', name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (index.h("div", { key: 'b6a01eba2908e4cebaee077d2b61608580757652', class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (index.h("stzh-text", { key: '4c17ec7d067726d86e38412b9810f005a2f57645', font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (index.h("stzh-chipgroup", null, this.chipResults.map(chipResult => (index.h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", size: "large", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (index.h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
+        return (index.h(index.Host, { key: '18372583fca53c024eccc924a61ddb260f415ac9', "has-aside-filters": filtersAsideUsed, fullwidth: this.isStzhAnchornavVisible.toString() }, index.h("form", { key: 'f1669c6db058644a8e59a3a02bb27fc28125fe36', ref: el => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, index.h("div", { key: 'f6145b078dee24bf66c6202931290250e33e0650', class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, !!this.heading && (index.h("stzh-heading", { key: '315f29b61157dcd986af9a57c2c69c3fdf8ccb40', class: "stzh-search__header-heading", curve: "h2" }, this.heading)), index.h("slot", { key: '4863be9789597a5dd219b9f807892d54ceb6b9c9', name: "filters-main" }), !chipsProvided && this.chipResults.length > 0 && (index.h("div", { key: 'bbca30497aac264a703701349a046ea17e683191', class: "stzh-search__filters-main-chips" }, this.chipResultsHeading && (index.h("stzh-text", { key: '934c616d63bb15e8ff15a32db1e4cd3672d3c1c4', font: "heavy", size: "milli", color: "primary" }, this.chipResultsHeading)), this.chipResults[0].options ? (index.h("stzh-chipgroup", null, this.chipResults.map(chipResult => (index.h("stzh-dropdown", { label: chipResult.label, name: chipResult.value, variant: "filter", size: "large", "no-search": true, "hide-optional": true, inline: true, options: chipResult.options }))))) : (index.h("stzh-chipselect", { multiple: true, name: "subject", label: this.chipResultsHeading, "label-hidden": true, data: this.chipResults.map(chipResult => ({
                 label: chipResult.label,
                 value: chipResult.value,
                 counter: `${chipResult.amount}`,
                 variant: "filter",
                 size: "large",
-            })) }))))), filtersAsideUsed && (index.h(index.Fragment, { key: '3cd26189269d5cbcf7c0981f128dc7751d27fbf8' }, index.h("div", { key: '7a17846c958c42f353015c69e212d38f9718e120', class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, index.h("div", { key: 'ed3054ebbed9c21e66019df437116fb023db3ffc', class: "stzh-search__filters-aside-inner" }, index.h("div", { key: '335a4e3d75772ac25674c57355dfda6ebb5ea5c2', class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), index.h("stzh-details", { key: 'f92f5d74519ee4d976e04bb071d46ce9c6794a8d', open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, index.h("stzh-button", { key: '84fd028ee320f97c4b44a4b13135fb562c61c198', class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), index.h("div", { key: 'b0472beb0c2098d6133e811398314ed11e433cec', slot: "content" }, index.h("slot", { key: '03c4e69683c370aff5385ce197ef7c9494d6886d', name: "filters-aside" }))))))), index.h("div", { key: 'b916f2deefd605c422b0eba1ca87e2536bb91cb1', class: "stzh-search__results-wrapper" }, resultsShown && (index.h(index.Fragment, { key: 'a004d4ea54292cdd436cfc63c987ae168c0064a9' }, this.results.length === 0 ? (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && !this.hideResultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.resultsText && this.renderResultsText(), this.subscribePath && this.renderSubscribeButton(), this.emptyText && (index.h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (index.h("div", { class: "stzh-search__empty-link-wrapper" }, index.h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (index.h(index.Fragment, null, index.h("div", { class: "stzh-search__results-header" }, this.variant !== "teaser" && this.resultsHeading && !this.hideResultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, htmlContent: this.resultsHeading })), this._sortOptions.length > 0 && (index.h("div", { class: "stzh-search__results-sort" }, index.h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, "no-wrap": true, class: "stzh-search__results-sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", name: "sortby", items: [this._sortBy], options: this._sortOptions, onStzhChange: this.onDropdownSortChange })))), this.resultsText && this.renderResultsText(), this.subscribePath && this.renderSubscribeButton(), index.h(WrapperElement, Object.assign({ class: "stzh-search__results", "max-3-columns": filtersAsideUsed }, wrapperProps), this.results.map(result => (index.h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), index.h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (index.h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, disabled: this.loading, a11yDisabled: this.loading }))))))), this.error && (index.h("div", { key: '6f2d60547dcd69a7881dfaf60e07802d8f9418cc', class: "stzh-search__error" }, index.h("stzh-message", { key: 'a6c01b196095a68a2fad3f336668ad3a6223bc05', type: "error", label: this.error }))), this.loading && index.h("stzh-loader", { key: 'f76121a46298724a9496cd7b4a81ce3d736aee34', class: "stzh-search__loader" })), index.h("slot", { key: 'd46f8cbbfaa37fd39899c5f370b3b16500d027d4' }))));
+            })) }))))), filtersAsideUsed && (index.h(index.Fragment, { key: '7d2c98238776a13adc7c7997d41b7e4615106f1e' }, index.h("div", { key: '40106b7e51e009ad3ad7a95a6af271d65490e355', class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, index.h("div", { key: 'c14fabeabf4723ed87c8938c89c41929602a0645', class: "stzh-search__filters-aside-inner" }, index.h("div", { key: '173cc320374c6223c043c760b091d0cdaffd325d', class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), index.h("stzh-details", { key: '28ee40a757bddc553a28746fc4cc0ae0ffd18830', open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, index.h("stzh-button", { key: 'de2d1b3b274b401b1f592e7bd088395a19246c10', class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), index.h("div", { key: 'aabb9577ff2a6fd624dcb4d28a7f90339c2649ed', slot: "content" }, index.h("slot", { key: 'afc67f2a669749553037a8267adf6bd840a0d728', name: "filters-aside" }))))))), index.h("div", { key: 'b6adbd6dcb92f54ddeedefc65b39afd7e919e769', class: "stzh-search__results-wrapper" }, resultsShown && (index.h(index.Fragment, { key: 'bd342d88492cca0cf84e3f1a6b7f3b5409e7e6df' }, this.results.length === 0 ? (index.h(index.Fragment, null, this.variant !== "teaser" && this.resultsHeading && !this.hideResultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, innerHTML: this.resultsHeading })), this.resultsText && this.renderResultsText(), this.subscribePath && this.renderSubscribeButton(), this.emptyText && (index.h("stzh-text", { class: "stzh-search__empty-text", innerHTML: this.emptyText })), this.emptyLinkLabel && this.emptyLinkHref && (index.h("div", { class: "stzh-search__empty-link-wrapper" }, index.h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel }))))) : (index.h(index.Fragment, null, index.h("div", { class: "stzh-search__results-header" }, this.variant !== "teaser" && this.resultsHeading && !this.hideResultsHeading && (index.h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel, htmlContent: this.resultsHeading })), this._sortOptions.length > 0 && (index.h("div", { class: "stzh-search__results-sort" }, index.h("stzh-dropdown", { "hide-optional": true, inline: true, "no-search": true, "no-wrap": true, class: "stzh-search__results-sort-dropdown", variant: "plain", size: "small", sizeMedium: "tiny", name: "sortby", items: [this._sortBy], options: this._sortOptions, onStzhChange: this.onDropdownSortChange })))), this.resultsText && this.renderResultsText(), this.subscribePath && this.renderSubscribeButton(), index.h(WrapperElement, Object.assign({ class: "stzh-search__results", "max-3-columns": filtersAsideUsed }, wrapperProps), this.results.map(result => (index.h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" })))), index.h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink && (index.h("stzh-button", { variant: "secondary", class: "stzh-search__action-more", label: this.localization.showMore, onClick: this.handleMoreClick, disabled: this.loading, a11yDisabled: this.loading }))))))), this.error && (index.h("div", { key: '24a94ee48bb6bdada35515d95ea458c8ee2eed4c', class: "stzh-search__error" }, index.h("stzh-message", { key: '2710a47edad642aec957aa1f050c1c47b9e35317', type: "error", label: this.error }))), this.loading && index.h("stzh-loader", { key: '334807f5313b0b994a2a040826d05b8b5e29e0ad', class: "stzh-search__loader" })), index.h("slot", { key: 'd30b388ca0381c1e5d6f8472db0f96549b20c17c' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -51,12 +51,12 @@ const StzhSection = class {
         this.init();
     }
     render() {
-        return (index.h(index.Host, { key: '7fd0c934d834c5ba3e1d3819445194ad4c3808e7' }, index.h("section", { key: '2d3ab3cf8e027094f84ce58e59b2a1338b6a05fa', class: {
+        return (index.h(index.Host, { key: '217bdcf9dec8073d71555f06f147af51ad02bf41' }, index.h("section", { key: '9fe2e897d618ecc1e16dccb45a8d9b8320beefa8', class: {
                 "stzh-section": true,
                 "stzh-section--is-breakout": this.breakout,
                 [`stzh-section--${this.variant}`]: !!this.variant,
                 [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,
-            } }, index.h("div", { key: '88f5584174878277b4fac4ded250a8ed8b5c648e', class: "stzh-section__outer" }, index.h("div", { key: '27e3f07efbb17f98bf5979bf205dccd8e34cdcfa', class: "stzh-section__heading" }, index.h("slot", { key: '827cb806fc89516d98ef79d0fdcd9ceb65399200', name: "heading" })), index.h("div", { key: 'bdf857b7d368e11ff0d64cd9cd6368a32b1b678b', class: "stzh-section__wrapper" }, index.h("slot", { key: '5aa7acc9cd48576f958d511b6979762a7c542624', onSlotchange: this.onSlotChange, ref: el => (this.slotElement = el) }))))));
+            } }, index.h("div", { key: '62b33ef27042513eafb64382970f1b581b25073e', class: "stzh-section__outer" }, index.h("div", { key: '5f22e05dfdfd89a10c823cda6ff5e8b8b54c6ca6', class: "stzh-section__heading" }, index.h("slot", { key: '894c483bb197c3104aaa00da933e45e2234b3ccb', name: "heading" })), index.h("div", { key: '44c86a8ba3cf0bb62fa73be93c462ea619bfad25', class: "stzh-section__wrapper" }, index.h("slot", { key: '45dc78b55fbb544e98da98cb2f4054768aed0b26', onSlotchange: this.onSlotChange, ref: el => (this.slotElement = el) }))))));
     }
 };
 StzhSection.style = StzhSectionStyle0;

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

@@ -16,7 +16,7 @@ const StzhSitemap = class {
         const classes = {
             "stzh-sitemap": true,
         };
-        return (index.h(index.Host, { key: '99d523a3bf63a9074c2d77d76c49bbfa4f75e79e' }, index.h("div", { key: '8010ca85acec35a2c2bf4f81b866d93be008f024', class: classes }, index.h("stzh-datalist", { key: '0538cddd5a2d6eb4df76c139c4ac75a4beb2b756', items: this.items }))));
+        return (index.h(index.Host, { key: 'ed9d18d586865d44a1e0e517d35ea4e478c0a6d7' }, index.h("div", { key: '5ae374ef725722c1a746ac224228f25eb57d450f', class: classes }, index.h("stzh-datalist", { key: '9031c091fe44ac799b915bc1a9634ddc314f95b1', items: this.items }))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-skin-portal-mitwirken.cjs.entry.js

@@ -16,7 +16,7 @@ const StzhSkinPortalMitwirken = class {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return index.h(index.Host, { key: '2f5015a9105d7974af3e0a9675ec52080157812a' });
+        return index.h(index.Host, { key: '7e3b899bad495cfe05e87b6250499d3d09765189' });
     }
 };
 StzhSkinPortalMitwirken.style = StzhSkinPortalMitwirkenStyle0;

package/dist/cjs/stzh-skin-storybook-preview.cjs.entry.js

@@ -16,7 +16,7 @@ const StzhSkinStorybookPreview = class {
         console.log(this.constructor.style.replace('@charset "UTF-8";', ""));
     }
     render() {
-        return index.h(index.Host, { key: 'd4dda5d590bf56a68b471658844cf533c47d1f2b' });
+        return index.h(index.Host, { key: '6fcd1e011e72df8eb912d22d4dfd87fc12b94ae8' });
     }
 };
 StzhSkinStorybookPreview.style = StzhSkinStorybookPreviewStyle0;

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

@@ -91,7 +91,7 @@ const StzhSkiplink = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b7cb36af7eb6d3a7f2b71f0556a5ed33da436f68', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, index.h("a", { key: '61e0d72ef086c1cb38a7075469fa0b8e5ae5111a', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: 'aacea8364c74fc02f3fc8f193efb99da565de4dd', ref: el => (this.text = el) }, this.label ? this.label : index.h("slot", null)))));
+        return (index.h(index.Host, { key: '566d146867ecbcd1c350f9a075161f79c641d85c', focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, index.h("a", { key: '286185dec3b6ef3570b1a34ed29e297b92e808c3', ref: el => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("div", { key: '8d3d373f9bd4196910b880c60871c3232dd60987', ref: el => (this.text = el) }, this.label ? this.label : index.h("slot", null)))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-socialmediastream-item.cjs.entry.js

@@ -81,7 +81,7 @@ const StzhSocialmediastreamItem = class {
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (index.h(index.Host, { key: 'd3be8327a8166f58d97d2b8f5c66a542b34aba0b' }, index.h("a", { key: '11181a4a8f10414b15da6e5a635854ef59980f84', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (index.h("div", { key: '4ed5430702a50008b01997e411175a0554e53622', class: "stzh-socialmediastream-item__image" }, index.h("stzh-ratio", { key: '0bfd90a4d5cb7bdf58d9dd09d7629709ffe13274', ratio: "1:1" }), index.h("div", { key: '5b2101a8fbf12e22de56d8e5b35bebb45033f97b', class: "stzh-socialmediastream-item__image-inner-wrapper" }, index.h("img", { key: '80a813a49539eb7780a4cfc36fae537316fea182', src: this._item.image, alt: this._item.account.title })))), index.h("div", { key: '8fce0eb2f57cae1b403a7b2d4b022d5c7e8d748b', class: "stzh-socialmediastream-item__content" }, index.h("div", { key: '7949ab547abe45b67a623dc2703d27b3973cecf1', class: "stzh-socialmediastream-item__content-head" }, index.h("stzh-text", { key: 'e6d52db80ef508c72bbf2c6cc365e72559a98bc8', size: "nano", class: "stzh-socialmediastream-item__content-title" }, index.h("strong", { key: 'cb763aa9a4d827ffc1781b1972fa7a0128a34b43' }, this._item.account.title), index.h("br", { key: 'd602e8ea46edcfec240e129a7bc2f1424d2ab68b' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), index.h("stzh-icon", { key: '7a187adf9ef4ba2335a555169c480d64eca22410', name: this.getIconName(this._item) })), index.h("div", { key: '9468d052b21a0dcc603aafacb7f738f48733936f', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), index.h("div", { key: '55ae3bef43d7c3710940eea457d03c44e4179e23', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (index.h(index.Host, { key: 'a2db53c89224f5db81b9aabcf1ee6375294d7446' }, index.h("a", { key: 'ca521339ebbbb64466275bb2ae17726607ec2178', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (index.h("div", { key: '02b7ec3cc7ab92a2ecb59167f1a32721ece3405b', class: "stzh-socialmediastream-item__image" }, index.h("stzh-ratio", { key: '66111e4bb0e6daea944f7410a692560e42238b43', ratio: "1:1" }), index.h("div", { key: 'baa7fdba65b5a6144615c5349661708f9e3efdea', class: "stzh-socialmediastream-item__image-inner-wrapper" }, index.h("img", { key: '029b2d40c233eca33502f3369a4d37a2587acb87', src: this._item.image, alt: this._item.account.title })))), index.h("div", { key: '6928ef7b63c9e7026aeecc632aa84aaf51e0826c', class: "stzh-socialmediastream-item__content" }, index.h("div", { key: '7100f1db4726db79982da3c801dec9a77817c0eb', class: "stzh-socialmediastream-item__content-head" }, index.h("stzh-text", { key: '1bc8ad7d81fb8ad0fbdecd2a28190f695121d485', size: "nano", class: "stzh-socialmediastream-item__content-title" }, index.h("strong", { key: 'e11d2ea1c02376b23c9badc5858b246fcd3235b9' }, this._item.account.title), index.h("br", { key: '5e527a82280db5b1890836f26b04aa3439376759' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), index.h("stzh-icon", { key: '1774cda6ba51958bec13cd4ba724cd513ebebc32', name: this.getIconName(this._item) })), index.h("div", { key: 'f7900847ad81fa65f625de40e839adf32433403b', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), index.h("div", { key: '730c56fcf7d1bfac01dd18567c15021de211d77e', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (index.h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, index.h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return index.getElement(this); }

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

@@ -320,7 +320,7 @@ const StzhSocialmediastream = class {
             "stzh-socialmediastream": true,
             "stzh-socialmediastream--has-heading": headingSlotUsed || !!this.heading,
         };
-        return (index.h(index.Host, { key: 'f63fa8b0999772f03750cbe8820ee7f1add5cc6f' }, index.h("div", { key: '149155fb348da1ee1a575fdc33a4372cf2dce718', class: classes }, index.h("div", { key: '687dd31ff7d07997fa9581fbc2fbca22905f7052', class: "stzh-socialmediastream__heading" }, !!this.heading ? (index.h("stzh-heading", { level: this.headingLevel }, this.heading)) : (index.h("slot", { name: "heading" }))), index.h("div", { key: 'cebd9bc1a551b4ef811c03318ec6144c313d11ff', class: "stzh-socialmediastream__items" }, this._items &&
+        return (index.h(index.Host, { key: 'a809d75196f3282b7611a55ab712d34f9b75ab7e' }, index.h("div", { key: '3cfbc3b48e27657efae8c67d59b2de30adf0442f', class: classes }, index.h("div", { key: '5c830dbfd73dca56943e59fb0865bbe8e8983fbe', class: "stzh-socialmediastream__heading" }, !!this.heading ? (index.h("stzh-heading", { level: this.headingLevel }, this.heading)) : (index.h("slot", { name: "heading" }))), index.h("div", { key: '89a675f9ad86ef13c17f1bc9142b8f91d1093b38', class: "stzh-socialmediastream__items" }, this._items &&
             this._items.length &&
             this._items.map(item => (index.h("stzh-socialmediastream-item", { class: "stzh-socialmediastream__item", item: item })))))));
     }

package/dist/cjs/stzh-stepper-item.cjs.entry.js

@@ -59,9 +59,9 @@ const StzhStepperItem = class {
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete,
         };
-        const dotted = (index.h("span", { key: 'cec5d39bb2c68067cd9b20faf4bf8806e1cdd1a3' }, !this.clickDisabled ? (index.h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (index.h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (index.h("span", { key: 'd3c3909987d3d81a634e5e17fcd5308801fe4f88' }, index.h("span", { key: 'e1647826e5d4f7eed598b8f1f600d29189cb27fc', class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h("span", null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { key: 'a078ac0bcb5d6df53648fa5b019f6ed6e9e3a15c', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null))));
-        return (index.h(index.Host, { key: 'e104e36e467bbdfb59b97e9083896a8d940f61aa', role: "listitem" }, index.h("div", { key: 'b0366d9c0fb622a3708c070656d41e10288132a8', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (index.h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (index.h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, index.h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h(index.Fragment, null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null)))), this.first && this.dotted && dotted)));
+        const dotted = (index.h("span", { key: '508cd6b4a18483109ef1ef11c0f9d9f17ddf5652' }, !this.clickDisabled ? (index.h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (index.h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted__disabled" }, index.h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (index.h("span", { key: '49a638209e06ee6ebfdda12c2719da56d6fe4585' }, index.h("span", { key: 'c25b6045feed5488e0b97e8f25d34ca306afb613', class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h("span", null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { key: '16fb64a1bf6b09338709d730f7b4ed9c4dd193a4', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null))));
+        return (index.h(index.Host, { key: '6748774638b12d8d6b1f091e7d73e71eb252b97e', role: "listitem" }, index.h("div", { key: '12bda164a6879c07919916e7a4d4d489d03e4b48', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (index.h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (index.h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, index.h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (index.h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (index.h(index.Fragment, null, index.h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (index.h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), index.h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : index.h("slot", null)))), this.first && this.dotted && dotted)));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -168,13 +168,13 @@ const StzhStepper = class {
             "stzh-stepper": true,
             [`stzh-stepper--index-${this.index}`]: !!this.index,
         };
-        return (index.h(index.Host, { key: '605e85922409a5ed3dddbb5108d0202c57c26282', style: {
+        return (index.h(index.Host, { key: '30ffb16546845e54b1bf1a78acb862ad172364f7', style: {
                 "--steps": this.currentSteps ? this.currentSteps.toString() : null,
-            } }, index.h("div", { key: 'b919b394fbd8e238a9551fc0a459fec8e6417d91', class: classes }, index.h("div", { key: '853a5e6f40acceaa31faab64961166082b9d4bed', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index$1) => (index.h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index$1), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
+            } }, index.h("div", { key: '0ad830635cdc8bde864da43095a282497b33b401', class: classes }, index.h("div", { key: 'dbdce6c242bd8672290a545e69e4e0b8d79839c6', class: "stzh-stepper__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index$1) => (index.h("stzh-stepper-item", Object.assign({}, this.getItemAttributes(index$1), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled, onStzhClick: (e) => {
                 this.handleStepClick(e);
             }, onStzhDottedClick: (e) => {
                 this.handleStepClick(e);
-            }, class: "stzh-stepper__item" })))), index.h("slot", { key: '6d4d3b8bf5cca301d964d39f4c5dc524d7368c9d' })))));
+            }, class: "stzh-stepper__item" })))), index.h("slot", { key: '783ac28a904949159e5aa4d8a0c912d9efc841ad' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-sticky-actions.cjs.entry.js

@@ -63,7 +63,7 @@ const StzhStickyActions = class {
             "has-active-scrollup": this.hasActiveScrollup,
             "is-not-slotted": !this.isSlotted,
         };
-        return (index.h(index.Host, { key: '6c8ebc279657c8dffa2644654b09542bf55efe69' }, index.h("div", { key: '9fcbdcad5683fe7741f642a7bf444ceae1233caf', class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { key: '7a79a12699ea676dc31f32863b47eb95e8228269', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { key: '16c99c6428759f472ef06991b4ec9df511f18ded', class: "stzh-sticky-actions__container" }, index.h("div", { key: '200c1441aa9ebdc7dfd14996a734f24891d4c74c', class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { key: '98764cb16335cc679591ddd396e521264b2fcb7c', name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '682eae81fbaf81a49500030dbeb20625126ca725', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { key: 'f5cd783199a9bc1df6af1355c0a25d7b07d99752', name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
+        return (index.h(index.Host, { key: 'e963944524ebc4ff4cdf7d98537181eba6055242' }, index.h("div", { key: 'fa36d8553727daadea9d1e482912cdefd92ac308', class: classes, "data-stzh-sticky-width-container": true }, index.h("stzh-sticky", { key: '2561e8025d594afe234cfdeb7560b0be05853bc4', name: "actions", class: "stzh-sticky-actions__sticky", position: "fixed", variant: "transparent", disableStickyTop: true }, index.h("div", { key: 'ad4493e57dd7a5ce964cb12b06e70effcbaa0831', class: "stzh-sticky-actions__container" }, index.h("div", { key: '9923aa2313848ad304d2d875b2980210067bd74b', class: "stzh-sticky-actions__chat-wrapper" }, index.h("slot", { key: '73b86cbdcff0133f3a02347ea330b35f620e2200', name: "chat", onSlotchange: () => index.forceUpdate(this.element) })), index.h("div", { key: '83b7e6d314d1213dd14dda6de79d20e2c8c221e0', ref: el => (this.scrollupElement = el), class: "stzh-sticky-actions__scrollup-wrapper" }, index.h("slot", { key: 'd9b98d76d61548589aed31b4909669a8a81c18d0', name: "scrollup", onSlotchange: () => index.forceUpdate(this.element) })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -295,7 +295,7 @@ const StzhSticky = class {
             [`stzh-sticky--position-${this.position}`]: !!this.position,
             [`stzh-sticky--${this.variant}`]: !!this.variant,
         };
-        return (index.h(index.Host, { key: '09b291b9b737fe5bcf0c86fa64367c59d93e52d2', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { key: '29b6e68c486f85fa8c07a61c5fd124cca65a377b', class: classes }, index.h("div", { key: 'b7006519791f0d1bbdfab03fe6c3d995406f3318', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), index.h("div", { key: '6efa8cbbd1a53255f74e55746a397328283f597a', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, index.h("div", { key: '701494061066cf048f04293c6610b074bdc9ea60', class: "stzh-sticky__content" }, index.h("div", { key: '9c50260068f966551bb025001b2f83d4679507c3', class: "stzh-sticky__content-inner" }, index.h("slot", { key: '9110714f09149e6c0cdbe2f46d8b2cc8b8f846b5' })))))));
+        return (index.h(index.Host, { key: '366a3c2c59058ea5e6184d481827b5487a642f33', "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, index.h("div", { key: 'f94ec092ad846089f58e75a5bf3b11efe123b210', class: classes }, index.h("div", { key: 'c69b2cc74ef7276d4530c6eab020c5801e5db86f', ref: el => (this.spacerElement = el), class: "stzh-sticky__spacer" }), index.h("div", { key: '8059e8c6fd26eca9cd1409674ed32925bf244aae', ref: el => (this.stickyElement = el), class: "stzh-sticky__sticky" }, index.h("div", { key: 'd3531d057480b4e99f5a398c1801a661b8250c80', class: "stzh-sticky__content" }, index.h("div", { key: 'adbe9130517d8564d0e6c591580af6ecb4c81dd1', class: "stzh-sticky__content-inner" }, index.h("slot", { key: '0e1ff73b671caa8d7119a8900853437cfb731bd1' })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -157,7 +157,7 @@ const StzhTable = class {
             "has-action-or-search": actionButtonSlotUsed || searchSlotUsed,
             "has-header": headingSlotUsed || actionButtonSlotUsed || searchSlotUsed,
         };
-        return (index.h(index.Host, { key: '338abb46c8780a3d6723d2de3f134ade0b3646d4' }, index.h("div", { key: '3f01744bf7a03c2ca325a07169fdf3f214aea09e', class: classes }, index.h("div", { key: '6f80418b1d2250b1802c97d3670a72debd83c3b9', class: "stzh-table__header" }, index.h("div", { key: '5788d10305f53dfd58b1a2cf1164eaebb11eceb2', class: "stzh-table__heading" }, index.h("slot", { key: '94bc4d40c1e9b0596a50bcd1252aae9a9f73ac20', name: "heading" })), index.h("div", { key: '735de97d98d3ba8578433484f031e2a0e4d813c3', class: "stzh-table__sub-header" }, index.h("div", { key: '12f58d8c79357d736dc6760bddef128cf3fddbbe', class: "stzh-table__search" }, index.h("slot", { key: 'f0c063a9e70179e822014334a193e70dc68f3ea1', name: "search" })), index.h("div", { key: '450613fe07acb886cb2b5f52a1e9eabbfafbc028', class: "stzh-table__action-button" }, index.h("slot", { key: 'da76303ff9c249d76bdf52721db588b9cbc73243', name: "action-button" })))), index.h("div", { key: '74f8ddb0fb9b75ec91b204b3c4e7172adfe05bb3', class: "stzh-table__outer-wrapper" }, index.h("div", { key: '6a81509cd30f01ccef7d72fcc3ffa2a8e7e04b64', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", { key: '1c479db3827456abf8d8c0bb95be619d9e512006' }))), index.h("div", { key: '85b829919e2abfc5088bf03a613e4b74be32a108', class: "stzh-table__list-wrapper" }, index.h("div", { key: 'eaf0eea0e08560125ccd78cfb821573952f7bd04', class: "stzh-table__list-sort-wrapper" }, index.h("slot", { key: '6c11ceb2d3c422969fa3cb8f64eb21e08f6a2da0', name: "list-sort-by-dropdown" }), index.h("slot", { key: '6ca4f5cfdde46659315852fa5e6d6b74b7d34f0d', name: "list-sort-direction-dropdown" })), index.h("slot", { key: '6f2a0fe5a0a2a82fbf53757e6e089c41efd53e80', name: "list" })), index.h("div", { key: 'd556ee78d084f12b8eeadf1e4d0d661885a8147f', class: "stzh-table__pagination-wrapper" }, index.h("slot", { key: '8d7c6bd93852083c0c7e0bb6c3546a43b2865e7b', name: "pagination" })))));
+        return (index.h(index.Host, { key: '43ed84df5c0468faa3c17ddf6a723af2520c092d' }, index.h("div", { key: '65fb70103afae39dfad71191ee7ee2e4017b5146', class: classes }, index.h("div", { key: '13a24b9e05560f73d12e7a14f4caab3f68e68977', class: "stzh-table__header" }, index.h("div", { key: '9e2397988e9ceb316d4ee5e0ef708a9134116684', class: "stzh-table__heading" }, index.h("slot", { key: 'a5f2f58606a5d38531fafe1211634a072902aff5', name: "heading" })), index.h("div", { key: '7934ff3a69af7a3822caf0ca7bd526f3e39cf517', class: "stzh-table__sub-header" }, index.h("div", { key: 'e6086f890109a2ae29ea1c38337252cc62ff3ed4', class: "stzh-table__search" }, index.h("slot", { key: 'd93491dd6e78cb0f9009ce331ec7678b2cbf1642', name: "search" })), index.h("div", { key: '7e7959697a73eb364cce07fdffbb74002c8eb0ea', class: "stzh-table__action-button" }, index.h("slot", { key: 'eb26ff350e78c73567050c1e2eb7e20041afc3de', name: "action-button" })))), index.h("div", { key: 'dd792af4b0e54dece443d1a0385008df85e8e464', class: "stzh-table__outer-wrapper" }, index.h("div", { key: '390ae4cb7863cad3fd64b8ea79b593b6be372c32', ref: el => (this.tableWrapper = el), class: "stzh-table__wrapper", onScroll: this.handleScroll }, index.h("slot", { key: '7c076791dc150f8a634399cbce0a421b03688370' }))), index.h("div", { key: 'b0ec5dd1a2d8da3fe4ec233b59e2d589134c473d', class: "stzh-table__list-wrapper" }, index.h("div", { key: 'cf050f9931715eee8d9316c94c153a543ed27cae', class: "stzh-table__list-sort-wrapper" }, index.h("slot", { key: '721f935fe7009c706b785b0a07bf13e72f3a0cf5', name: "list-sort-by-dropdown" }), index.h("slot", { key: '24ffc40fd99ceba65088257622c4fe51136caeaf', name: "list-sort-direction-dropdown" })), index.h("slot", { key: '03a90708c1df822888cec89677215cbc07e82252', name: "list" })), index.h("div", { key: 'bceb8529c16b3f35df46c6fdf79ab2aedf7d98a9', class: "stzh-table__pagination-wrapper" }, index.h("slot", { key: '61960b688772212b7e0f6acf9bcd5e9982d87b08', name: "pagination" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {