@oiz/stzh-components 4.6.0-beta1 → 4.6.0-beta2

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

@@ -45,10 +45,10 @@ const StzhMessage = class {
             "stzh-message--has-close-hidden": this.hideClose,
             [`stzh-message--type-${this.type}`]: !!this.type,
         };
-        return (index.h(index.Host, { key: 'c0bf908892332ec4fa6442307d7c4e471e845d1e', hidden: !this.open }, index.h("div", { key: 'a3e09f5723bf00a44e7897218a6180e059ca9c50', class: classes }, index.h("div", { key: '4f056a8a4e4d8a82c96ba7329d20932c6c75b56e', class: "stzh-message__content" }, index.h("div", { key: '1b51f1898e57346a34365555a4316f7830627df0', class: "stzh-message__icon-wrapper" }, index.h("stzh-icon", { key: 'a7456799e5f7c09bb99c36d4d37405c97fc8c719', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
+        return (index.h(index.Host, { key: '2b8dc6ea34859cbb2ec97a5050e302c4abb6950d', hidden: !this.open }, index.h("div", { key: 'db8a69b709fdf2744e5539a4a73450572f421ffb', class: classes }, index.h("div", { key: 'd5d0cee42e708c3023b08e5ff8bb19ce069115fd', class: "stzh-message__content" }, index.h("div", { key: 'e8bac8afe7becaa1c1e2e7c6547693baa61ac3c9', class: "stzh-message__icon-wrapper" }, index.h("stzh-icon", { key: '85e21a2325335da337918af004be529a6ccc8b3a', class: "stzh-message__icon", name: ((this.type === "info" || this.type === "page-message") && "info-help-filled") ||
                 (this.type === "success" && "checkmark-circle-filled") ||
                 (this.type === "warning" && "important-warning-filled") ||
-                (this.type === "error" && "warning-filled") })), index.h("div", { key: '6545f7dc6e470c4bbb7725e8652244ac8f704720', class: "stzh-message__text-wrapper" }, index.h("div", { key: '006f489c47dad8065ae4e116f261ce8695041133', class: "stzh-message__label" }, this.label ? this.label : index.h("slot", { name: "label" })), index.h("div", { key: '3d263bb95da6c01d8b6114f8d12a56fee10be42f', class: "stzh-message__description" }, this.description ? this.description : index.h("slot", null)), index.h("div", { key: '49104e4eeae5cc3e23c526d28f8605737ed0e233', class: "stzh-message__link" }, index.h("slot", { key: '13a40455da1e4818862e2f35a53eab6c295ebad9', name: "link" })))), !this.hideClose && (index.h("stzh-button", { key: '2fa4dcce37b24494a7690fa5fb083131646fd362', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
+                (this.type === "error" && "warning-filled") })), index.h("div", { key: '573458dff14060a35d607a7145e6689edf4851e6', class: "stzh-message__text-wrapper" }, index.h("div", { key: '348e43408a997b4852bca789a49da5db02a9c5ab', class: "stzh-message__label" }, this.label ? this.label : index.h("slot", { name: "label" })), index.h("div", { key: '9060751b5a99c6291618d876008c078e224e36fd', class: "stzh-message__description" }, this.description ? this.description : index.h("slot", null)), index.h("div", { key: '274a4a61335cf8f8aeb378270c7bae204f35f28e', class: "stzh-message__link" }, index.h("slot", { key: 'c5b42563deef2f30a6b8bf16c7e3e6ca7f7013a1', name: "link" })))), !this.hideClose && (index.h("stzh-button", { key: 'ea83e74ca6bb1f26fea215449edee56d47e1120a', class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-microsite-teaserlist.cjs.entry.js

@@ -77,7 +77,7 @@ const StzhMicrositeTeaserlist = class {
         const classes = {
             "stzh-microsite-teaserlist": true,
         };
-        return (index.h(index.Host, { key: '0f36a5370879333ccf565faa37b44406d061c27b' }, index.h("div", { key: 'e707b0d75ed7ad895040405243a4b34a394c0287', class: classes }, this._tagChips.length > 0 && (index.h("stzh-chipselect", { key: '2b62f7f91604aa72c428644b6dcb1c6f0451ff92', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), index.h("stzh-cardlist", { key: '0e44440b6d3f8e87f96cfb51168150f4c0936f05', layout: "teasers" }, this._filteredSlicedItems.map(item => (index.h("stzh-card", { href: item.link }, item.image && (index.h("stzh-ratio", { slot: "image" }, index.h("img", { src: item.image }))), item.title && index.h("div", { slot: "heading" }, item.title), item.description && index.h("div", { slot: "content" }, item.description))))), this._showMoreLink && (index.h("div", { key: '8f0c69df65086857710f1e473050902a0c1fa5bb', class: "stzh-microsite-teaserlist__show-more" }, index.h("stzh-button", { key: 'edb1405a4312d0ef9716f09f70a1c9d5889b02a5', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
+        return (index.h(index.Host, { key: '33f709ed60ff013d3e0c123f19a4d86b0bff9128' }, index.h("div", { key: '43aac0009c91d4f7ac0c0961773b792bc2cec274', class: classes }, this._tagChips.length > 0 && (index.h("stzh-chipselect", { key: '815b9b392e0862973c2da64e77b24f4d6bcfc63d', "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange })), index.h("stzh-cardlist", { key: 'd521939456bbf16acfe6f2ea7aebcd2183818e76', layout: "teasers" }, this._filteredSlicedItems.map(item => (index.h("stzh-card", { href: item.link }, item.image && (index.h("stzh-ratio", { slot: "image" }, index.h("img", { src: item.image }))), item.title && index.h("div", { slot: "heading" }, item.title), item.description && index.h("div", { slot: "content" }, item.description))))), this._showMoreLink && (index.h("div", { key: '7c3f1712e6ae03f25746daecaffc6c1d7e56e455', class: "stzh-microsite-teaserlist__show-more" }, index.h("stzh-button", { key: '0cc6a2d32a1aa5180909aec516d0b0eafd3c2f9b', variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -201,7 +201,7 @@ const StzhMonthyearpicker = class {
         const classes = {
             "stzh-monthyearpicker": true,
         };
-        return (index.h(index.Host, { key: '04822e03428a9ba57f2484594ae537732a421430', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: '399c3b047e37e7b79e4d36c80bac59b1daf3e13c', class: classes }, index.h("input", { key: '37999496eed9ade53d9db976f5e3677238617eb8', type: "hidden", name: this.name, value: this.value }), index.h("div", { key: '57eb470eda690449c0e4bba0e2c8c363f97c01be', class: "stzh-monthyearpicker__wrapper" }, index.h("stzh-dropdown", { key: 'df1db2053b6595d508d5ae7f345362d7a48e9892', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), index.h("div", { key: '81c4252357b69e12430114d2dc0ca535571c5fb1', class: "stzh-monthyearpicker__separator" }, "/"), index.h("stzh-dropdown", { key: '2b48ae397d295a6a6f59c78f820f3d134f235ac1', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+        return (index.h(index.Host, { key: 'eba44c9f88fe3fa74d87a7981034e157559b61ba', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { key: '46e3134928c73452993808b293f89112e1fcf71b', class: classes }, index.h("input", { key: '2849c42a5eef497bad5f5d904a8d72665c7671f8', type: "hidden", name: this.name, value: this.value }), index.h("div", { key: '2d1932ee3a82185d8da0e8de8a1591c5347582c3', class: "stzh-monthyearpicker__wrapper" }, index.h("stzh-dropdown", { key: 'a671562dff236ace3f5c4cea6e8a28ae6f3469d4', open: this.monthOpen, name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: el => (this.monthsDropdown = el), options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), index.h("div", { key: '7669fda5c59e27c793e04fd63d2e9b90abb96924', class: "stzh-monthyearpicker__separator" }, "/"), index.h("stzh-dropdown", { key: '7f2b5ca4a7ec87b7964c89f125ecc079011acc41', open: this.yearOpen, name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, hideOptional: this.hideOptional, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/stzh-offline-indicator.cjs.entry.js

@@ -99,7 +99,7 @@ const StzhOfflineIndicator = class {
         const classes = {
             "stzh-offline-indicator": true,
         };
-        return (index.h(index.Host, { key: '422b6e413556e9f2edb9b452f205ca874275dfca', "is-offline": this.isOffline }, index.h("div", { key: 'f278d91bd3e5e2ec99e16a9f540288eb55786fa4', class: classes })));
+        return (index.h(index.Host, { key: 'f2839774390e99ecf7e889dbdee76cc34d98fc60', "is-offline": this.isOffline }, index.h("div", { key: 'e0001ee7bc12fc8772aca2d2f6247e186c35d632', class: classes })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-page-skiplinks.cjs.entry.js

@@ -31,7 +31,7 @@ const StzhPageSkiplinks = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5046589207deb30c45a78f428eb40b5c5ee32f8d' }, index.h("div", { key: '8324bdf84d7e0cf527f62755c28f4ab261083c7f', class: "stzh-page-skiplinks", role: "list" }, index.h("slot", { key: '872ab4ccfaf265204cee9972bb514183bd389488' }))));
+        return (index.h(index.Host, { key: '8d08d198d36044d8db4d092aebe367b36f1b33bd' }, index.h("div", { key: 'adeea901b72554cbc7bf68deb21b97e3d1d96ea3', class: "stzh-page-skiplinks", role: "list" }, index.h("slot", { key: '31415fd96e02e3dcbbf052302614a182db711904' }))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -33,7 +33,7 @@ const StzhPagebottom = class {
             "stzh-pagebottom": true,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (index.h(index.Host, { key: '39fc15c82ea7a0342ae22995c955fb1aa335cf2f' }, index.h("div", { key: '3a98fdfddf3a7c8ec913e8d043abb3317960a613', class: classes }, index.h("div", { key: '7d0b419eb9e3c52033f23036acf768676dcbf7d4', class: "stzh-pagebottom__wrapper" }, index.h("div", { key: '0e226f0e488f5d47777db162f07642343451e051', class: "stzh-pagebottom__left" }, this.withPrint && (index.h("div", { key: '59d325ef57c910eed0e4d445859a9bb1c5f00b50', class: "stzh-pagebottom__print" }, index.h("stzh-print", { key: '0b91e400063e68a8a5693801f425cca292daee59' }, index.h("stzh-button", { key: 'e7318c4b8436589b7a465da53b36a9ba3a9dbc6b', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (index.h("div", { key: '62743d682cc6bbb1c1a29abb3d8d045379ff5a7e', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && index.h("div", { key: '0d02e2741d7ff6733cd66cce07f89a0c21c50d2f', class: "stzh-pagebottom__share-title" }, this.shareTitle), index.h("stzh-share", { key: '71fe83be58ab15c8cc2140290b2d734a1a6c8431', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), index.h("div", { key: 'ddd86749013107816d852a7bb9ef6ef06f80f5f4', class: "stzh-pagebottom__sticky-actions" }, index.h("slot", { key: 'cd63c9c294c612119748bb25668ef1867354e21b', name: "sticky-actions" }))))));
+        return (index.h(index.Host, { key: '005deb84142b76635d8470da6adaff17ed108958' }, index.h("div", { key: '73bb1bf4226953f7447768d9c1eed3bfc01ba646', class: classes }, index.h("div", { key: 'd8530fe4842bf7d12d41bc34e77d49134df1b29b', class: "stzh-pagebottom__wrapper" }, index.h("div", { key: 'd478518d4b7ff3c5efddf845563a290881df671c', class: "stzh-pagebottom__left" }, this.withPrint && (index.h("div", { key: 'fac78db6e63ce1a66e7d060f1ec451958b3e0889', class: "stzh-pagebottom__print" }, index.h("stzh-print", { key: '3e514058ba6b66a96fdfb3f31d0047e25c66eb59' }, index.h("stzh-button", { key: '922c3ea2036de895cb385f4cd18e8905150cc7fa', label: this.localization.printLabel, variant: "tertiary-plain", size: "small", noPaddingLeft: true, noPaddingRight: true, analyticsId: this.printAnalyticsId })))), !this.shareDisabled && (index.h("div", { key: '6090a666612fe829464a70a04251ec5de350480a', class: "stzh-pagebottom__share-wrapper" }, this.shareTitle && index.h("div", { key: '8c9b1f9819f6f4d725acf93b06771baafb437254', class: "stzh-pagebottom__share-title" }, this.shareTitle), index.h("stzh-share", { key: '27f1d54b536bba53ca35f561de163b51175fc59f', url: this.shareUrl, services: this.shareServices, mailSubject: this.shareMailSubject, mailBody: this.shareMailBody })))), index.h("div", { key: '7937e815e89689189415eb7512017aa35264decb', class: "stzh-pagebottom__sticky-actions" }, index.h("slot", { key: 'b058ae842711f3a054e8efbee759c0c235db4af4', name: "sticky-actions" }))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -21,7 +21,7 @@ const StzhPagecontent = class {
             "stzh-pagecontent--has-aside-left": hasAsideLeft || hasAnchornav,
             "stzh-pagecontent--has-no-aside-left": !hasAsideLeft && !hasAnchornav,
         };
-        return (index.h(index.Host, { key: 'e96ce1bc99f2ab5f8f282aec53deaf2908e1f8ba' }, index.h("div", { key: 'c9a7ca33dbe6a590722a540b9d2bb409fae365ab', class: classes }, index.h("aside", { key: '1d4f570f023aca62eb5e234261c2184082b66386', class: "stzh-pagecontent__aside-left" }, index.h("div", { key: 'c7cdda306b9302cb783afa8e065c1f22d1048861', class: "stzh-pagecontent__anchornav" }, index.h("slot", { key: '9a8c8304c851198acd84f22563a8df02ead9602a', name: "anchornav" })), index.h("slot", { key: '339ba37df14dacf411362086b38d147e10128047', name: "aside-left" })), index.h("div", { key: 'a28547b90c50f3149b9725f2129cc791f817f390', class: "stzh-pagecontent__content" }, index.h("slot", { key: 'deb6bbd7edd0f4749c710ba80a2d4706b8bec795' })))));
+        return (index.h(index.Host, { key: 'f726915c77fb50da570f9464c11423e5a8ccd89a' }, index.h("div", { key: 'd41812115b4a4acde596e6a0ab9f010cbd0a61cb', class: classes }, index.h("aside", { key: 'c66267f8d7d3cedc013a2ec928ed4c45c03255f8', class: "stzh-pagecontent__aside-left" }, index.h("div", { key: 'e4e90e268463053ebacfbce8ff4812a737fe7367', class: "stzh-pagecontent__anchornav" }, index.h("slot", { key: '08a0ca43c98fd32d7ef4585d7dcb5e4720f2865c', name: "anchornav" })), index.h("slot", { key: 'a423a6bd099c5891ef13aea3ff2ed09703b8b952', name: "aside-left" })), index.h("div", { key: '1cdcdf7717832b8d55634a4775f6f5ebda741126', class: "stzh-pagecontent__content" }, index.h("slot", { key: 'a67910955cf2adde8784169a5ff9bb3d3306871a' })))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pagetitle-hero.cjs.entry.js

@@ -94,7 +94,7 @@ const StzhPagetitleHero = class {
             "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
             "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
         };
-        return (index.h(index.Host, { key: '1657d8a33fc183979dae782a391de0615dfbc4ea' }, index.h("div", { key: '801b6d1369e98f67c208b0be3fa45c1a176e39d6', class: classes }, index.h("div", { key: '935eac6988b56b44cfec10230c8bf18bf8ab1e31', class: "stzh-pagetitle-hero__header" }, index.h("div", { key: '5848e215afaaf040201ed738b39aab2a6f07062c', class: "stzh-pagetitle-hero__back-link" }, index.h("slot", { key: '24b64fc4a9a4b29ea6b39f08ca702b7809f1e7d5', name: "back-link" })), index.h("div", { key: '0ddaa2d333f1caeea92c72c5cebd45d0a3b018a2', class: "stzh-pagetitle-hero__image-wrapper" }, index.h("div", { key: '2b1400b3453a9a095b97ea3fe98a235d19cd5438', class: "stzh-pagetitle-hero__image-ratio" }), index.h("slot", { key: 'e183ea5dc1b2a58ac728e2cf53a722178134b666', name: "image" })), index.h("div", { key: '4cc1a4ae81ed787411bc61dcac181be4d6964cd9', class: "stzh-pagetitle-hero__title-wrapper" }, index.h("div", { key: 'b6a3bb60c5fdac396380bdcec66371bdd832d69b', class: "stzh-pagetitle-hero__tags", role: "list" }, index.h("slot", { key: '7006bdba82027e8c87e5284599be85b2ea9eeee9', name: "tag" })), index.h("div", { key: 'ed97596a9d6efe5efcbae587205abeeaf1250741', class: "stzh-pagetitle-hero__title-parent" }, index.h("h1", { key: 'ae7f0e566032dc884cde9cfd0952f6604e390fe9', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && index.h("div", { key: '79de06597cdd88a0dc71551293a4a42efbe0a68e', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), index.h("div", { key: '964ca1ab5ab1605759fbcc8a7a7267f70d570a16', class: "stzh-pagetitle-hero__lead" }, index.h("slot", { key: '669bb2abe3cd5afafe31047ae0642c7ea7f6b33c', name: "lead" }), index.h("div", { key: '67404442468b2d4a599409fa43271068e958b55f', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+        return (index.h(index.Host, { key: '7131fb3579b554c83ed04bfe3adf7a334cea4a11' }, index.h("div", { key: 'ae93f4d178c03843cc294dc161b2f86745da9df5', class: classes }, index.h("div", { key: 'bfc41e3c232ba164871607a2545e767e212998d5', class: "stzh-pagetitle-hero__header" }, index.h("div", { key: 'b0f8eeff9b5a96b3351d0caa67d9c054486b21be', class: "stzh-pagetitle-hero__back-link" }, index.h("slot", { key: 'f0d6ac1f0ce21887f59a86b3972ed8ca5a5503b2', name: "back-link" })), index.h("div", { key: '4b1b3be34cb11c0d681ef1b0fde01d32102feb28', class: "stzh-pagetitle-hero__image-wrapper" }, index.h("div", { key: '4910095f7a2168ee467e366e743d8b345d2a1a03', class: "stzh-pagetitle-hero__image-ratio" }), index.h("slot", { key: '7ba9ad2669e9c7e2e2107fc0af9794ad712f1dfa', name: "image" })), index.h("div", { key: '0149cf3acc30fcf1cc9a69893b64256789cbb365', class: "stzh-pagetitle-hero__title-wrapper" }, index.h("div", { key: '6a333694de2e2afe32b9876495d3f06852f0f458', class: "stzh-pagetitle-hero__tags", role: "list" }, index.h("slot", { key: 'a2d242d2e4b05b43430ef358f1284a349750b5d6', name: "tag" })), index.h("div", { key: 'afddda21b9a8c4582fa9d4ce93bde060767182b1', class: "stzh-pagetitle-hero__title-parent" }, index.h("h1", { key: 'b91e3e159a07f765be288379646506e080668a48', ref: el => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title", id: this.headingId, innerHTML: this.heading })), this.subtitle && index.h("div", { key: 'c1a796b7ca15da84d12da31c92c4248e76ad5c55', class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), index.h("div", { key: '9c58abab4911b1ade0ecf535cd7766113e77dbf9', class: "stzh-pagetitle-hero__lead" }, index.h("slot", { key: '319faf271c067665cfe0101293250cce130bb656', name: "lead" }), index.h("div", { key: '2afffcdf300dae75622fa3da9cbd671a9a7411d9', class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/stzh-pagetitle-home.cjs.entry.js

@@ -77,7 +77,7 @@ const StzhPagetitleHome = class {
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (index.h(index.Host, { key: '411e43b873355f6833302d3f5c4634656d07674f', "has-image": imageSlotUsed }, index.h("div", { key: '9ad919e56bffd1e94aae92ef51f9c1fe3b6f9baf', class: classes }, index.h("div", { key: 'f190aa80becf5e7d4da05629e141341f5487d32b', class: "stzh-pagetitle-home__image-wrapper" }, index.h("stzh-ratio", { key: 'e45711502cef5fa846f3d23f3e6f8294a961d8b2', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), index.h("div", { key: '4d85c6a810e68f9b4cee772c6dcc39f38d028d5f', class: "stzh-pagetitle-home__image-gradient" }), index.h("div", { key: '6ba98cd456027bd4d149d4b5b00ba5d2ba959c0f', class: "stzh-pagetitle-home__image-inner-wrapper" }, index.h("slot", { key: '4a007d005c3daa04819fb460b8add30a08be6e6c', name: "image" }))), index.h("div", { key: '48b3c611569615b7c426246ef6c5563fb81f346a', class: "stzh-pagetitle-home__container" }, index.h("div", { key: 'fee8d4b5883efd42f1b5f2d8da8d8d2345e1ecb0', class: "stzh-pagetitle-home__wrapper" }, index.h("div", { key: '94fdb6c4dc4896572899fd322d85c62fab62441f', class: "stzh-pagetitle-home__text" }, index.h("div", { key: '6a19a90f9a5265aa920a0bfd4dfa857456a0514c', class: "stzh-pagetitle-home__meta" }, index.h("div", { key: '117fe57cb0a394ea68123ddb8a2e8758739667e4', class: "stzh-pagetitle-home__readspeaker" }, index.h("slot", { key: 'e851ae904e772763342e5511b3c5c9fd05655cf5', name: "readspeaker" }))), index.h("div", { key: '8144c982a635ce17edd77f285842ec958cca80d8', class: "stzh-pagetitle-home__heading" }, index.h("slot", { key: '241266cbb89558ef831725c518ff9d28dcc2058d', name: "heading" })), index.h("div", { key: 'e0e9cc3e78d2ccc635283eae26867b9002c1a64e', class: "stzh-pagetitle-home__subheading" }, index.h("slot", { key: '21a58fe263656bc417fe254de48474d47e774227', name: "subheading" }))))))));
+        return (index.h(index.Host, { key: 'a6b5a908d562b6d6f595e92178b884c6c45f46f3', "has-image": imageSlotUsed }, index.h("div", { key: 'babedc3294a807918c5c8e66aaf9e6a497d0aa19', class: classes }, index.h("div", { key: 'a91f46ddc54b508eddaef1bd9b961e225f3b29bf', class: "stzh-pagetitle-home__image-wrapper" }, index.h("stzh-ratio", { key: '6fdd7ae67e9d3c37ea3b4c5abdbf83900f4ad724', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), index.h("div", { key: '85a80d1fc9c2b64fe884deb0ff4783a8875ba882', class: "stzh-pagetitle-home__image-gradient" }), index.h("div", { key: '06016f5efb8b69effaeccd47c672b0bf400bf652', class: "stzh-pagetitle-home__image-inner-wrapper" }, index.h("slot", { key: '30026bf3cf9fa3542d21163d75e30112296b1333', name: "image" }))), index.h("div", { key: '266b6330efdc3724a8f4055cf1117d51402b7a6d', class: "stzh-pagetitle-home__container" }, index.h("div", { key: '2bb3e41d69a23d18d9c75ff79b293ac17b93b49a', class: "stzh-pagetitle-home__wrapper" }, index.h("div", { key: '570d416be79b7d1b82772c10d07d0a709708f426', class: "stzh-pagetitle-home__text" }, index.h("div", { key: '04e39163a9bad8ba4ef5385a5f0503a72292d6a0', class: "stzh-pagetitle-home__meta" }, index.h("div", { key: '6318ed166a9502c9966fd9bc67c6ff764ccf0af1', class: "stzh-pagetitle-home__readspeaker" }, index.h("slot", { key: '3f1506b2d98b9ebf56734b77b0426a9cf01c4e50', name: "readspeaker" }))), index.h("div", { key: '85ae0b1b6aa706aff5f2cff5223b0c737f6723ce', class: "stzh-pagetitle-home__heading" }, index.h("slot", { key: 'b09c9b60fba35f97c4f481293ae05f849a543646', name: "heading" })), index.h("div", { key: '024e544ef0657fc490485aff1b745b54f034b070', class: "stzh-pagetitle-home__subheading" }, index.h("slot", { key: 'c015ffb08dee3ee824a7745743cb66c6e28928b5', name: "subheading" }))))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -136,7 +136,7 @@ const StzhPagetitle = class {
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (index.h(index.Host, { key: 'e6398f212eed8534ac80eb764a74ebe35d311620' }, index.h("div", { key: 'c11ed79faf6349fde988346d754d5a2b905309ae', class: classes }, index.h("div", { key: '5e98c7aba81ccc1b3490cacacfa55af86a900ff5', class: "stzh-pagetitle__container" }, index.h("div", { key: 'de34dd84cdb5ada82a19191f4437b66a563ea89c', class: "stzh-pagetitle__wrapper" }, index.h("div", { key: '6fbf0bb4f0abc036927a0b64504ee5ca74ef6be7', class: "stzh-pagetitle__text" }, index.h("div", { key: 'b550842ed8723ec0502a8a139afcd5809d02176a', class: "stzh-pagetitle__meta" }, index.h("div", { key: '81ca34cc8ca8372d05050061493cc76551801e0f', class: "stzh-pagetitle__tag" }, index.h("slot", { key: '096301436aa8ac1f1377ad85169d8c3e04543fe8', name: "tag" })), index.h("div", { key: '035ef0ac6f8d40859ea758d0d3831cb28877e5bf', class: "stzh-pagetitle__readspeaker" }, index.h("slot", { key: '5186a2037e376aabcfdd35b0b1d59458e3605126', name: "readspeaker" }))), this.dateline && index.h("div", { key: '23e7b45df5b0d607b247a93ea0dda8e0a28885ea', class: "stzh-pagetitle__dateline" }, this.dateline), index.h("div", { key: '8c6d1f999728d64f92b649a46364b74ee50d6c95', class: "stzh-pagetitle__heading" }, index.h("slot", { key: '1ac3b98d90c4a11e9e32c6a6b5fe78a2b9c1a0c7', name: "heading" })), index.h("div", { key: 'fcd54af4d4cab40af4a3dfa7b3f8fb98d6000ecf', class: "stzh-pagetitle__lead" }, index.h("slot", { key: 'a430bf605d8a66d7fb962bb5a01380053c174451', name: "lead" }))), index.h("div", { key: '195842563342453fea20960eebcb0af217f5ddac', class: "stzh-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: '56f5eebb638ece8823e6c73b290f53c84f63015b', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), index.h("div", { key: '9bb742947b00b029f25d24d8930c4fb66fd355a8', class: "stzh-pagetitle__image-inner-wrapper" }, index.h("slot", { key: 'f819b8ee87e9fd6a262ad868e5e94406d632ed15', name: "image" }))), index.h("div", { key: '8f4d70ee60c6da6689192c30be4dd26e11e3fde5', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, index.h("slot", { key: '5d90b3643bc224571d075f7522d048a5e49bbfdc', name: "disturber" })))))));
+        return (index.h(index.Host, { key: '44f334e63ff5db5a9a1d97e849da679dcc31839b' }, index.h("div", { key: '30456eb5fd2763ea488a1dafc7b2aee3e0ed4377', class: classes }, index.h("div", { key: 'f01d7ffba4f3347a13d85be74f41b37daa6bcaec', class: "stzh-pagetitle__container" }, index.h("div", { key: 'cb24305da741c280db8f91c77e61cbf51a7c1bf8', class: "stzh-pagetitle__wrapper" }, index.h("div", { key: '37ba4fbeea5c5a05b404cdf7985f8c813bea71a8', class: "stzh-pagetitle__text" }, index.h("div", { key: '073ba56929ce3463d71050652ea1462c685e27cf', class: "stzh-pagetitle__meta" }, index.h("div", { key: '2ffd8a096f4b83604499bd7f2ec0d7a854663647', class: "stzh-pagetitle__tag" }, index.h("slot", { key: 'e46fe24b23852c524aa8022892451835c1ffa798', name: "tag" })), index.h("div", { key: '9e1427369474667936816c937c05460db2ca9e32', class: "stzh-pagetitle__readspeaker" }, index.h("slot", { key: '381371798764e856e046768e2e8400e9721bb3b9', name: "readspeaker" }))), this.dateline && index.h("div", { key: 'd506066275fcd82211fe691d6b679b5ba93afe15', class: "stzh-pagetitle__dateline" }, this.dateline), index.h("div", { key: '5d9808dd2aebe14646a7b550cca1dcc69e1a61f1', class: "stzh-pagetitle__heading" }, index.h("slot", { key: 'a466725b4361d869036486ad2ecdb461a53f6be5', name: "heading" })), index.h("div", { key: '09c87ce1f8caba89b916e122fdb033018040254c', class: "stzh-pagetitle__lead" }, index.h("slot", { key: 'df1436e56e97f206efa49f846e714db15e56f1b7', name: "lead" }))), index.h("div", { key: '3481dfdd6294adae1b326882b5b2661548cbfaca', class: "stzh-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: 'bfee946466a4e6244ca71f775151929d1a225a4a', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), index.h("div", { key: '5bb505e0c6fb23c54cca77cdd4bb80c96388d6ad', class: "stzh-pagetitle__image-inner-wrapper" }, index.h("slot", { key: 'c45840b576424d1b0a6185f3fb48c3ecf06f5884', name: "image" }))), index.h("div", { key: '2358fb35eda7fa73e9d0ee107bb9bed919e6297a', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, index.h("slot", { key: '89902de8265bc604db44feb9f7e6a1068253c495', name: "disturber" })))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -444,9 +444,9 @@ const StzhPanorama = class {
             text: imageTitle,
         }));
         const currentScene = this._scenes.find(({ sceneId }) => sceneId === this.scene);
-        return (index.h(index.Host, { key: 'e13a68f8203db678fd80e60cce44dc39a48933d9' }, index.h("div", { key: '08fbaddbb670022b80ec87b39d48237c49536c28', class: classes }, index.h("stzh-figure", { key: '5639e565f54bbb6157b9b850459dd5feb496f942', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, index.h("stzh-ratio", { key: '1be121e3e99af22ea13b49ea49c18caaff4a3959' }, index.h("div", { key: '9de470e5f725200a1bf7a7779f9c5a00124a66de', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, index.h("div", { key: 'ee7d8a3fe2ab75db9af737add03d23493b380d60', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (index.h("stzh-dropdown", { key: '089090098be70ffad7b374439a9c40c8983d077c', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (index.h("div", { key: '38edbe69e5beabce1b46457b837c6b396f6a69b3', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), index.h("div", { key: 'b5527f8113d1827a91de01b827a266afc78eb754', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (index.h(index.Fragment, { key: 'ed77a68da8790ed236a6d7bb1d2ce25c18d7411f' }, index.h("stzh-button", { key: '164c91211f4095aaae34eda2e39e019fe337184e', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), index.h("stzh-button", { key: 'ae9ddb86cd1354fee6a69b81799ce456d1ae5f86', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), index.h("stzh-button", { key: 'c4c50653bc80fc34aa4b442d22ba70962fb09cd4', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), index.h("stzh-button", { key: '9e75f3ff02a72589e74adf79f088af439d6ff6be', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), index.h("stzh-button", { key: '14b6bd8033a1fd2a1affbc5b9504b35c66406c34', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), index.h("stzh-button", { key: 'ea00141206e9d5edebd22af1154ebc9c025f3c94', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (index.h("stzh-button", { key: 'ca33d06c5e1386ba560b2e76f6aa1fc60ac3be71', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
+        return (index.h(index.Host, { key: 'a0e4205ae7cfe0ae2d38d0ce8ca9a4154b92d8bc' }, index.h("div", { key: '4020962ed7f84328e0d690eacd57dc171200a3e7', class: classes }, index.h("stzh-figure", { key: '05e64014b90947d214220788d84007c54ed62533', class: "stzh-panorama__figure", heading: this.heading, caption: currentScene.caption || this.caption, copyright: currentScene.copyright || this.copyright }, index.h("stzh-ratio", { key: '435c970233fa3ff709809ccdabdaba41203a4ff6' }, index.h("div", { key: '7f3cd220acf42b9201a1e3ddf18946279043fd8d', ref: el => (this.containerElement = el), class: "stzh-panorama__container", tabindex: "0" }, index.h("div", { key: 'f6466f7338384f4753d674dde7b5a00eb82ef324', class: "stzh-panorama__sceneselector" }, sceneOptions.length > 1 && (index.h("stzh-dropdown", { key: 'b6e11adab5c9cad8e1aad1cb6aff94acdc733ce4', class: "stzh-panorama__sceneselector-dropdown", size: "small", popoverPlacement: "top", label: this.localization.sceneLabel, labelHidden: true, noSearch: true, items: [this.scene], options: sceneOptions, onStzhChange: this.handleSceneDropdownChange })), (currentScene.imageAuthor || currentScene.copyright || this.copyright) && (index.h("div", { key: 'ab59d2ea571d023918e5458bb3cfa5dfe5deffd2', class: "stzh-panorama__copyright" }, currentScene.imageAuthor || currentScene.copyright || this.copyright))), index.h("div", { key: 'bbfd108408228c711d2306eb149fd09bc1304d14', class: "stzh-panorama__controls", onKeyDown: this.handleControlsKeydown }, this.showControls && (index.h(index.Fragment, { key: 'eb4ebf27d617f8fec09c7e6e8059eb7feeff9329' }, index.h("stzh-button", { key: '579d432b9f723f6172e886cb27c3aa3e1ce6f190', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panLeft, variant: "secondary", icon: "arrow-left", size: "small", onClick: () => this.action("panLeft") }), index.h("stzh-button", { key: '1bd7d36f93ddc69508e368a00bf088b49006f220', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panRight, variant: "secondary", icon: "arrow-right", size: "small", onClick: () => this.action("panRight") }), index.h("stzh-button", { key: 'c1957ca01278ecb84a6bf4438c902adc1777851e', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panUp, variant: "secondary", icon: "arrow-up", size: "small", onClick: () => this.action("panUp") }), index.h("stzh-button", { key: '8f3d2ca0f3ced59550df329582dc1d3d22e07994', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.panDown, variant: "secondary", icon: "arrow-down", size: "small", onClick: () => this.action("panDown") }), index.h("stzh-button", { key: 'fb7b0ffd613af7a39ba5263c6e279f9824e44647', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomIn, variant: "secondary", icon: "plus", size: "small", onClick: () => this.action("zoomIn") }), index.h("stzh-button", { key: '21e1118a8845c616ed8b45d8b58516cf06a6dfb0', class: "stzh-panorama__control stzh-panorama__control--show-medium", iconOnly: true, "a11y-label": this.localization.zoomOut, variant: "secondary", icon: "minus", size: "small", onClick: () => this.action("zoomOut") }))), this.isOrientationSupported && (index.h("stzh-button", { key: '04ab232818d4976cb1ff4904596e4e765ab8c3a4', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isOrientationActive
                 ? this.localization.stopOrientation
-                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), index.h("stzh-button", { key: 'a514f73a90d9e92edb65d50fb168a3f104504531', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
+                : this.localization.startOrientation, icon: this.isOrientationActive ? "target-bullet" : "target", iconOnly: true, size: "small", onClick: () => this.action(this.isOrientationActive ? "stopOrientation" : "startOrientation") })), index.h("stzh-button", { key: 'f14391578d80d071ea38c7c7f5c2e983e2eacaae', class: "stzh-panorama__control", variant: "secondary", a11yLabel: this.isFullscreen
                 ? this.localization.disableFullscreenLabel
                 : this.localization.enableFullscreenLabel, icon: this.isFullscreen ? "shrink" : "expand", iconOnly: true, size: "small", onClick: () => this.action("fullscreen") }))))))));
     }

package/dist/cjs/stzh-pi-content-navigation.cjs.entry.js

@@ -54,7 +54,7 @@ const StzhPiContentNavigation = class {
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (index.h(index.Host, { key: '0a16919e13de81aa15deb81d4162461bc797686d', "has-lead": hasLead }, index.h("article", { key: '546ab726feeb9c83537035fadb527653736a9883', class: classes, "aria-label": this.heading, role: "listitem" }, index.h(CardLink, { key: 'f70c9644e16f1e6ec267000151c0a0f1b6f3ec78', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { key: 'd4b40a0c8bc2dd10832ee93c17706a0a449ca7a5', class: "stzh-pi-content-navigation__image" }, index.h("stzh-ratio", { key: '61f8e77a448c9bc15ffeb684c7fa6d209223f935', ratio: "2:1" }, index.h("slot", { key: 'b35984bd914f3a7eaaf75d11e57a125f50097a4f', name: "image" }))), shouldRenderTitleRatio && (index.h("div", { key: '787bbc48bafb804de5202715d1eb520599c90061', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), index.h("div", { key: '2e5d9234f52eccf7dffa868b00c0a8bfcd337d62', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (index.h("div", { key: 'c3be66d778cf8d7e84c385c778c9ea638b4d5756', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" })))), index.h("div", { key: '5785a3fda4de2dd49ef6151ed9383b2ec00109a2', class: "stzh-pi-content-navigation__arrow" }, index.h("stzh-icon", { key: '0790cce9f6da093c7fd2e1614afe1c5b4e679da2', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (index.h(index.Host, { key: '76c5d185c4b95277345a7553e2fb2624b2381c73', "has-lead": hasLead }, index.h("article", { key: 'c6951fc908a7c16cd6664e74dd895339628c96b4', class: classes, "aria-label": this.heading, role: "listitem" }, index.h(CardLink, { key: 'f5124cbc29d5e191d30410d41c21c575dfb0b7f5', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, index.h("div", { key: '6ffc74e56bc15e97d56290b67dcad105fe37464d', class: "stzh-pi-content-navigation__image" }, index.h("stzh-ratio", { key: 'd1f29fd45d125151bf697b5a69ea2a804823dc24', ratio: "2:1" }, index.h("slot", { key: 'cccf70fe733b2a71813fd04fedcf8f8120d47049', name: "image" }))), shouldRenderTitleRatio && (index.h("div", { key: '4f060613a6dc993ffebe15c33752bdb118418e21', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), index.h("div", { key: 'dc35588c012f3fc1736ae8fbb9b5c01f19587db8', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (index.h("div", { key: '4157f021b2f12c6f36a3de1d71155704c73689f3', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : index.h("slot", { name: "lead" })))), index.h("div", { key: '2d1949deebd2556d9994df1d8d372aebe44135e7', class: "stzh-pi-content-navigation__arrow" }, index.h("stzh-icon", { key: 'd24c8c04a36f75c80c15e7801e65559820a0b587', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -263,7 +263,7 @@ const StzhPiMenu = class {
         // Screens medium, large and ultra
         const wideScreens = `${this.entangledMenuSize}px`;
         const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;
-        return (index.h(index.Host, { key: '57045684e2f4a2ad5559d0a531b77d1bb3e13fcc', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: '42c42aa79045f7df2899fe837fee2f447a67d99b', class: "stzh-pi-menu-positioner" }, index.h("div", { key: 'dcb487d0a8c093aa51403b204e33ad5a4d89682f', class: classes, style: { width: menuWidth } }, index.h("div", { key: '49bd807628e73a723b2a6ff2088f30315eee2131', class: backdropClasses, onClick: this.handleBackdropClick }), index.h(Heading, { key: 'b85e45447c9ea90347107a8dbca3c925aa5c2315', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, index.h("button", { key: '42082f63ea72df85dd0d196383a4c9407b28caeb', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, index.h("span", { key: '64717628f0b735ebd05447efd2880f2c30d2b190', class: "stzh-pi-menu__button-text" }, this.heading), index.h("stzh-icon", { key: 'b727aef4cfd5bfffd7d8332d214db3062e6b85c7', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), index.h("div", { key: 'fd1eb0ba81ab4853f7404777aab058280227f6e3', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, index.h("div", { key: '684f545d9e82648acc98013ad52012eda80126de', class: "stzh-pi-menu__content-inner" }, index.h("nav", { key: '69d4e538668cd30c89b7b5054de0ecacb3f94d14', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && index.h("p", { key: '325c29a8d6b209ea46ca2c42eae6ba21386d8163', class: "stzh-pi-menu__subheading" }, this.subheading), index.h("ul", { key: 'e96fc4a6d795f42f7de769caa7503b312450c5e4', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index$1) => (index.h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (index.h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (index.h("stzh-details", { open: index$1 === 0 }, this.setSubMenuHeader(item), index.h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), index.h("button", { key: 'a796b83c07871db48cdb79cf57f33fc45c463442', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, index.h("span", { key: 'be9e79e611839893454186a68a384c887d8fdd5f', class: "stzh-pi-menu__button-text" }, index.h("span", { key: '24d7d0ad3f41dd70e887bff7e1d50a6297e8e369', class: "stzh-pi-menu__heading-text" }, this.heading)), index.h("stzh-icon", { key: 'a8a0ef3058c5b26000c6edfc68f2935c578058df', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (index.h(index.Host, { key: '19c9245b7898158309b63e3cecbb6322a9494567', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, index.h("div", { key: '80bf1fd91b550fcfd4b1894020957f890d67520f', class: "stzh-pi-menu-positioner" }, index.h("div", { key: '44b07a6af2535d75f2aee4f64edae2f05420774f', class: classes, style: { width: menuWidth } }, index.h("div", { key: '5ebcdd0b185e4be3b9e86bc7e83ce2087b09dabb', class: backdropClasses, onClick: this.handleBackdropClick }), index.h(Heading, { key: '075ce52b2106e0df7eac5414a51690b049f982c7', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, index.h("button", { key: 'b1a7f0497f7e973848e8fe4d337d2f7d5b13b28f', ref: el => (this.buttonElement = el), class: "stzh-pi-menu__button", "aria-expanded": `${this.open ? "true" : "false"}`, type: "button", "s-object-id": this.analyticsId || this.heading }, index.h("span", { key: '7beb1052c937d6c7a536be8bd92f8cc536cc9018', class: "stzh-pi-menu__button-text" }, this.heading), index.h("stzh-icon", { key: '9901049180363da950c14a75ad44db0360cc4e2f', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), index.h("div", { key: 'd0ebd8482b70224040fcc19a3693026c95e60579', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, index.h("div", { key: 'fd76f69718f44ca704754e0c5ebed8309ea9f2f4', class: "stzh-pi-menu__content-inner" }, index.h("nav", { key: 'ebc0138ea3372635a5c2538050dbe235e41735d8', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && index.h("p", { key: '778afe5da2ce59a0a72456c44f7be248a097c707', class: "stzh-pi-menu__subheading" }, this.subheading), index.h("ul", { key: '6fc94fcfb7a6711928e624f854b77bd5927fc24e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index$1) => (index.h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (index.h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (index.h("stzh-details", { open: index$1 === 0 }, this.setSubMenuHeader(item), index.h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), index.h("button", { key: '0347330e191eda5dda471f6e4379b254edc5cab2', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, index.h("span", { key: 'a42ee43aa87c160023605933428c75c0072fe691', class: "stzh-pi-menu__button-text" }, index.h("span", { key: '53106545d12e49cde15a24706f532bdfd179e8b3', class: "stzh-pi-menu__heading-text" }, this.heading)), index.h("stzh-icon", { key: 'e638fc640654dc3cb1223a40c34cfc7b8191e19a', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -63,7 +63,7 @@ const StzhPiPagetitle = class {
             "stzh-pi-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
         };
-        return (index.h(index.Host, { key: '517553d8fc2eccd4e392639972efd195cc13b82c', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, index.h("div", { key: '2c9b74f7594d4369ae717f3a0aa6221737818e37', class: classes }, index.h("div", { key: '6dbb9e4c7ef4125ef23884373700ca5510d5e2dc', class: "stzh-pi-pagetitle__hero-container" }, index.h("div", { key: '7d6590d75609755b9945181590a58e841ccb6a5d', class: "stzh-pi-pagetitle__hero" }, index.h("div", { key: 'efbac24ba586ef740b3fd012b653dacd571f8f87', class: "stzh-pi-pagetitle__breadcrumbs" }, index.h("slot", { key: '49ffdf90794fee13ac4098a7b7ab9ffffa022a00', name: "breadcrumb" })), index.h("div", { key: '87b59eafb444a76e740931ef533a17ef3dc7b378', class: "stzh-pi-pagetitle__meta" }, index.h("div", { key: '023f4c2a17340475e9a1bb99e5f9a7255b974cb2', class: "stzh-pi-pagetitle__readspeaker" }, index.h("slot", { key: 'f0f935fd4145be184f001899228e77d2d758e7a3', name: "readspeaker" }))), index.h("div", { key: '5b2800adf6b2e29621c5e0071daf3c6ead61f85c', class: "stzh-pi-pagetitle__dateline" }, index.h("slot", { key: 'e2b975fec524d79b1703c16bbdf59ca542173fec', name: "dateline" })), index.h("div", { key: 'f716648deb81197cb86ec57e153ef9533de7c739', class: "stzh-pi-pagetitle__heading" }, index.h("slot", { key: '29c5e4ef9226d7d5733c33d12232fee33f8044ae', name: "heading" })))), index.h("div", { key: 'd31ba15572bed4af76cd98acfef77998c297e805', class: "stzh-pi-pagetitle__image-lead-menu-container" }, index.h("div", { key: '3b77bd8ecbdf2a9e8ba57a2f43df4e67893f9c6f', class: "stzh-pi-pagetitle__image-lead-menu" }, index.h("div", { key: 'b31a688785c6ff74d414602e13240d7aca264f58', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (index.h("div", { key: 'f9023fc9c4a64a7a618e95b646185a9a03e0b101', class: "stzh-pi-pagetitle__menu-inner" }, index.h("slot", { key: 'e9cf0a9658c999a5e4f8e1706976308e091f9e2a', name: "menu" })))), imageSlotUsed && (index.h("div", { key: '563ec8906f9a1829b3795ec4fa1d808e7bb1982e', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (index.h("div", { key: 'f5608867a4849f00a22671b3e533259fec06e06f', class: "stzh-pi-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: 'd8026fe3433a8f59a43a874b9e64dfcf74fda574', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, index.h("slot", { key: 'bc44a468ece509db858af815781cc9950b79cec9', name: "image" })))))), menuSlotUsed && (index.h("div", { key: '6c0268e26dd4462b28b41b234b8998c6cc4ebb7a', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: 'dd88416348dde4e1a748f2bc842941c0bb1b17aa', name: "lead" }))))), !menuSlotUsed && (index.h("div", { key: '159cd4cc09defa62f7c926ba4d71d43762e7d682', class: "stzh-pi-pagetitle__lead-container" }, index.h("div", { key: 'a35c3f7341e49762fc86d9dde3055b89677dd919', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: '559b60a5f60a8b0fdf6f7f5b9c221924ec932acf', name: "lead" })))), index.h("div", { key: '81477ae7580ee075a57395bced4f525a472d2680', class: "stzh-pi-pagetitle__article-info-wrapper" }, index.h("div", { key: '1e232da206f1fd05ea3fa28d85d1c773d17d2b6e', class: "stzh-pi-pagetitle__article-info" }, index.h("div", { key: 'e097552cd246d1064cb9f9b307f45ef1bfde834d', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (index.h("div", { key: '11a170814162133727a85f9d3daf79499d0612e6' }, this.author && index.h("p", { key: 'a50c86bd6d4c336aeed4a77990be0854aa0fa869', class: "stzh-pi-pagetitle__author" }, this.author), this.date && index.h("p", { key: '8b3c06a346f10e06c9c6e969899b0f5db75aa172', class: "stzh-pi-pagetitle__date" }, this.date))), index.h("slot", { key: '1616edd716b2161e4ed69a31fc8c0f84ba93b7e8', name: "content" })))))));
+        return (index.h(index.Host, { key: '7ea11c48b8c57d36a37c2a6d74bbf9a2fc9d904e', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, index.h("div", { key: 'c9d1cc9761d0a35b9fc66baf409813c0af435685', class: classes }, index.h("div", { key: 'e32cb331b8e6f03381bb8b5ca33af86a992edf26', class: "stzh-pi-pagetitle__hero-container" }, index.h("div", { key: '37c4e72c7eb3b4e2ec1a64ace15c4d47b0f6e43a', class: "stzh-pi-pagetitle__hero" }, index.h("div", { key: 'f285333ba0eff3875613a2b890c36196f99ee12c', class: "stzh-pi-pagetitle__breadcrumbs" }, index.h("slot", { key: 'fd81c5e3e49816288ec9d822a86950c5702964a5', name: "breadcrumb" })), index.h("div", { key: '935d4419958984a2d91ed7db6d37a5beca568598', class: "stzh-pi-pagetitle__meta" }, index.h("div", { key: '328d4c6994b315da26f3f7470d741cffdbada90d', class: "stzh-pi-pagetitle__readspeaker" }, index.h("slot", { key: '2ead52ad42dabc733bfa67b3e743bc790c2b50eb', name: "readspeaker" }))), index.h("div", { key: '4df5e3871f9114a38dccc6739304df280f6cd7d4', class: "stzh-pi-pagetitle__dateline" }, index.h("slot", { key: '4576c4f11268a8081b71a8e776c3527f8cb94571', name: "dateline" })), index.h("div", { key: '24d4ef15a376d07ad44a95e38ea83e86e3be29cd', class: "stzh-pi-pagetitle__heading" }, index.h("slot", { key: '5530b2846ff28d8568c6781279d9671ab17e1601', name: "heading" })))), index.h("div", { key: '9dbfc7fac99bb4b89eef7887296648392e099109', class: "stzh-pi-pagetitle__image-lead-menu-container" }, index.h("div", { key: 'ab73e1d6f13e2098309bc03454657e9a9b189f4a', class: "stzh-pi-pagetitle__image-lead-menu" }, index.h("div", { key: '4a28eadc08311050cb0f6a591c01cf91c94dfdc1', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (index.h("div", { key: '566cf88bd625035d8060e7de23d1bfaf0858d1f7', class: "stzh-pi-pagetitle__menu-inner" }, index.h("slot", { key: '837e00551eb0e0208ec9ab979a3cf090af734b5a', name: "menu" })))), imageSlotUsed && (index.h("div", { key: '2f4be9e6df7f32ca34dff53a225f859905df6339', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (index.h("div", { key: 'c7c913468286788ec37f5be9a03e5c8aa0870b9c', class: "stzh-pi-pagetitle__image-wrapper" }, index.h("stzh-ratio", { key: '0cff56d0e99705c567589db49931ceff94b6ae5f', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, index.h("slot", { key: 'd5288b9554264c8d976188ad61898eaf4ae284ed', name: "image" })))))), menuSlotUsed && (index.h("div", { key: 'ba77a201bef9d6a44fae462cc30bf0d35a1e74db', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: 'c388a5a185ff83d98fb1e8400b4ffa6f0693e1bb', name: "lead" }))))), !menuSlotUsed && (index.h("div", { key: 'f2d78346bce95f3271cb386d3e03bbe0ceba8eac', class: "stzh-pi-pagetitle__lead-container" }, index.h("div", { key: '647bcc87e9fbfb359bc11b7b7b1b080f8a914b78', class: "stzh-pi-pagetitle__lead" }, index.h("slot", { key: '5c03b625f0282c93c4e32f24996caa0bfd12db78', name: "lead" })))), index.h("div", { key: '713935d6e3d7ed9ce9ec93fc551e37c820d043e1', class: "stzh-pi-pagetitle__article-info-wrapper" }, index.h("div", { key: 'd0103129df581d0b516f74556d26c0487cf17c2e', class: "stzh-pi-pagetitle__article-info" }, index.h("div", { key: '51b9b85aca3e2158ba29366dcc9497ff24da6781', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (index.h("div", { key: 'd1b26da604f2c60a8ca6d4a321cb113e610fd1c7' }, this.author && index.h("p", { key: '8fc605d7235b143d4fc6eee854a32ba493b2b8f4', class: "stzh-pi-pagetitle__author" }, this.author), this.date && index.h("p", { key: '6e9d57f0b109d837b850db8733eb5271af54ef81', class: "stzh-pi-pagetitle__date" }, this.date))), index.h("slot", { key: 'b87768ccb4752a0027585601b121f1948d9d31e4', name: "content" })))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -17,7 +17,7 @@ const StzhPiQuote = class {
         const classes = {
             "stzh-pi-quote": true,
         };
-        return (index.h(index.Host, { key: '5fd70d77731728318c9b9653b9bdc0796f7fc8a0' }, index.h("div", { key: '6e142cb6d6d2a4a4f78aa312bdd8c9d4968e959e', class: classes }, index.h("blockquote", { key: '69dc187d2d494dad5294299456920fd6ec7933c3', class: "stzh-pi-quote__content" }, index.h("p", { key: '5ae1f9a4d0df0d8285a1769729c419c640b029b1', class: "stzh-pi-quote__text" }, this.text), this.author && index.h("cite", { key: '0c251dc121558bf2ee8bed7a52d118df740eacae', class: "stzh-pi-quote__author" }, this.author)))));
+        return (index.h(index.Host, { key: '213692370897716d960e3dfbfa16142c6468bb6a' }, index.h("div", { key: '6fdc12ea34841aff0da66ff40f58812a94fa516d', class: classes }, index.h("blockquote", { key: '0b812d842316c3e83c1b44efc9c710bede61bcdd', class: "stzh-pi-quote__content" }, index.h("p", { key: '89ecfec809044b3cea057a017643ac6b7f04b26b', class: "stzh-pi-quote__text" }, this.text), this.author && index.h("cite", { key: '05f63895d5f308ec94f5528133a6cce6bd00ee66', class: "stzh-pi-quote__author" }, this.author)))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-870b4dee.js');
 
-const stzhPiTeaserLayoutItemCss = "@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-layout-item-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-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-layout-item-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::before, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::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-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    var(--stzh-color-coolgrey10));\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(--stzh-pi-teaser-layout-item-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-layout-item-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-layout-item-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-layout-item-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-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\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-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {\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-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__image.sc-stzh-pi-teaser-layout-item {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-link.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__date.sc-stzh-pi-teaser-layout-item {\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 stzhPiTeaserLayoutItemCss = "@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-layout-item-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-layout-item-h, [stzh-hidden].sc-stzh-pi-teaser-layout-item-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-layout-item-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::before, .sc-stzh-pi-teaser-layout-item-h *.sc-stzh-pi-teaser-layout-item::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-layout-item-h .has-focus.sc-stzh-pi-teaser-layout-item {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-layout-item-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout-item::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-layout-item-h {\n  --image-background-color: var(\n    --stzh-pi-teaser-layout-item-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-layout-item-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-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-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-layout-item-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-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-layout-item-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-layout-item-grid-template-areas,\n      \"text text text text text text image image image image image image\"\n    );\n  }\n}\n.sc-stzh-pi-teaser-layout-item-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-layout-item-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-layout-item-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-layout-item-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-layout-item-h:not([has-lead]) .stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-layout-item-h:not([has-image]) .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:549px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 550px) and (max-height: 639px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 50cqh 50cqh;\n  }\n}\n@container (min-height: 640px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-layout-item-h[image-position=top] .stzh-pi-teaser-layout-item {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\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-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item.sc-stzh-pi-teaser-layout-item {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser-layout-item__text.sc-stzh-pi-teaser-layout-item {\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-layout-item__wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__image.sc-stzh-pi-teaser-layout-item {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser-layout-item__image.sc-stzh-pi-teaser-layout-item > img.sc-stzh-pi-teaser-layout-item {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser-layout-item__dateline.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__title-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser-layout-item__title.sc-stzh-pi-teaser-layout-item {\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-layout-item__title-link.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser-layout-item__lead-wrapper.sc-stzh-pi-teaser-layout-item {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__lead.sc-stzh-pi-teaser-layout-item {\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-layout-item__date.sc-stzh-pi-teaser-layout-item {\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 StzhPiTeaserLayoutItemStyle0 = stzhPiTeaserLayoutItemCss;
 
 const StzhPiTeaserLayoutItem = class {
@@ -57,7 +57,7 @@ const StzhPiTeaserLayoutItem = class {
             "stzh-pi-teaser-layout-item--has-lead": hasLead,
             "stzh-pi-teaser-layout-item--has-image": hasImage,
         };
-        return (index.h(index.Host, { key: '6800fb97b1ec726ec3f09452a33100366d78ffac', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, index.h("article", { key: '85b38929fec3ee38994782bc7321e78684e779fd', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (index.h("div", { key: '1923478de5ada40e71286e3eaa49d8cdf7017a92', class: "stzh-pi-teaser-layout-item__image" }, index.h("img", { key: 'c9b796b46a9eb43706924619910c4efafe16d355', src: this.imageSrc, alt: "Example image" }))), index.h("div", { key: 'eeaaf7e1adf48da141173b7ce7a63dc2ea3763a9', class: "stzh-pi-teaser-layout-item__wrapper" }, index.h("div", { key: '6058d6be2b5124da300dd97733057d0c22e24d9f', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && index.h("p", { key: '68bae848e3e1cf377b075c7d05fce9aad811ac76', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), index.h("div", { key: '4e9705883f6f05ff52904322af547c85996da6df', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, index.h("div", { key: '3ced9f74e039e1cc456d4ef37074d8442844b857', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && index.h("div", { key: '92cd55abb157637e1e0db08edb85463be3e622bb', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
+        return (index.h(index.Host, { key: '22c18d7fd9de7d75ce2a33f1bf1c2b9ba155b07f', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, index.h("article", { key: 'c77072a09b6eb79691f42ec00d8e822345791aff', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (index.h("div", { key: '5a52e0b497bcbb76b4a11a998e895a096b631161', class: "stzh-pi-teaser-layout-item__image" }, index.h("img", { key: '621d1fd651d3420c80c56989962198bec015605c', src: this.imageSrc, alt: "Example image" }))), index.h("div", { key: '05c14742afec614a534d48a771539cdbd7d128d4', class: "stzh-pi-teaser-layout-item__wrapper" }, index.h("div", { key: 'a6ee0da58d7a855970b5b5619b432b075b893934', class: "stzh-pi-teaser-layout-item__text" }, this.dateline && index.h("p", { key: '181a0e14237977cd6902ec956260e0ea336f9108', class: "stzh-pi-teaser-layout-item__dateline" }, this.dateline), this.renderHeading(), index.h("div", { key: '406a47bc1425f5052bc7bb99309c9279bd05a262', class: "stzh-pi-teaser-layout-item__lead-wrapper" }, index.h("div", { key: '9d2397fd768f3b36985345b699c92fac2a80d87c', class: "stzh-pi-teaser-layout-item__lead" }, displayLead)), this.date && index.h("div", { key: '38ab554072180402070a63884889f965abbe446c', class: "stzh-pi-teaser-layout-item__date" }, this.date))))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"stzh-pi-teaser-layout-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,upbAAupb,CAAC;AAC1rb,qCAAe,yBAAyB;;MCa3B,sBAAsB;;;;QA8CzB,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,4BAA4B;gBACvC,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBArCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;IAqBxD,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,2CAA2C,IACpDA,QAAC,OAAO,IAAC,KAAK,EAAC,mCAAmC,IAChDA,QAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,wCAAwC,EAC9C,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,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnF,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACpC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;;QAI9B,MAAM,OAAO,GAAG;YACd,4BAA4B,EAAE,IAAI;YAClC,sCAAsC,EAAE,OAAO;YAC/C,uCAAuC,EAAE,QAAQ;SAClD,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,mCAAmC,IAC5CA,kEAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP,EAEDA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,kEAAK,KAAK,EAAE,kCAAkC,IAC3C,IAAI,CAAC,QAAQ,IAAIA,gEAAG,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,QAAQ,CAAK,EACpF,IAAI,CAAC,aAAa,EAAE,EACrBA,kEAAK,KAAK,EAAC,0CAA0C,IACnDA,kEAAK,KAAK,EAAC,kCAAkC,IAAE,WAAW,CAAO,CAC7D,EACL,IAAI,CAAC,IAAI,IAAIA,kEAAK,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAO,CACzE,CACF,CACE,CACL,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(--stzh-pi-teaser-layout-item-image-background-color,\n    #{$colorCoolgrey10});\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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-grid-template-areas,\n          \"text text image image\"\n        );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(--stzh-pi-teaser-layout-item-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(--stzh-pi-teaser-layout-item-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-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\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(--grid-template-areas-no-image,\n      var(--grid-template-areas));\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}","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserLayoutItemClickEvent } 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-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\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  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\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-layout-item\",\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-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__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    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\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-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--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-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser-layout-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,y3bAAy3b,CAAC;AAC55b,qCAAe,yBAAyB;;MCa3B,sBAAsB;;;;QA8CzB,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,4BAA4B;gBACvC,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBArCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;IAqBxD,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,2CAA2C,IACpDA,QAAC,OAAO,IAAC,KAAK,EAAC,mCAAmC,IAChDA,QAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,wCAAwC,EAC9C,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,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnF,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACpC,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;;QAI9B,MAAM,OAAO,GAAG;YACd,4BAA4B,EAAE,IAAI;YAClC,sCAAsC,EAAE,OAAO;YAC/C,uCAAuC,EAAE,QAAQ;SAClD,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,mCAAmC,IAC5CA,kEAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP,EAEDA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,kEAAK,KAAK,EAAE,kCAAkC,IAC3C,IAAI,CAAC,QAAQ,IAAIA,gEAAG,KAAK,EAAC,sCAAsC,IAAE,IAAI,CAAC,QAAQ,CAAK,EACpF,IAAI,CAAC,aAAa,EAAE,EACrBA,kEAAK,KAAK,EAAC,0CAA0C,IACnDA,kEAAK,KAAK,EAAC,kCAAkC,IAAE,WAAW,CAAO,CAC7D,EACL,IAAI,CAAC,IAAI,IAAIA,kEAAK,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAO,CACzE,CACF,CACE,CACL,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.scss?tag=stzh-pi-teaser-layout-item&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout-item/stzh-pi-teaser-layout-item.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-layout-item-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-layout-item-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-layout-item-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-layout-item-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-layout-item-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-layout-item-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-layout-item-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-layout-item-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-layout-item__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser-layout-item__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser-layout-item__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\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-layout-item {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:549px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 550px) and (max-height: 639px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 50cqh 50cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 640px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser-layout-item {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser-layout-item {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout-item {\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 { StzhPiTeaserLayoutItemClickEvent } 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-layout-item\",\n  styleUrl: \"stzh-pi-teaser-layout-item.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayoutItem {\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  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserLayoutItemClickEvent>;\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-layout-item\",\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-layout-item__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser-layout-item__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser-layout-item__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    console.log(\"imageSrc: \", this.imageSrc, \" & imagePosition: \", this.imagePosition);\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    console.log(\"hasImage: \", hasImage);\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-layout-item\": true,\n      \"stzh-pi-teaser-layout-item--has-lead\": hasLead,\n      \"stzh-pi-teaser-layout-item--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-layout-item__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser-layout-item__wrapper\">\n            <div class={\"stzh-pi-teaser-layout-item__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser-layout-item__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser-layout-item__lead-wrapper\">\n                <div class=\"stzh-pi-teaser-layout-item__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser-layout-item__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}