npm - @oiz/stzh-components - Versions diffs - 4.6.0 → 4.7.0 - Mend

@oiz/stzh-components 4.6.0 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (689) hide show

package/dist/components/stzh-pagetitle-home.js CHANGED Viewed

@@ -74,7 +74,7 @@ const StzhPagetitleHome$1 = /*@__PURE__*/ proxyCustomElement(class StzhPagetitle
             "stzh-pagetitle-home--hyphens": this.hyphensEnabled,
             "stzh-pagetitle-home--has-meta": readspeakerSlotUsed,
         };
-        return (h(Host, { key: 'f92ee37d405b81cfb5995067c42ed036e3422b96', "has-image": imageSlotUsed }, h("div", { key: '3ae7caaf67826f4b2e12415541dc0670fc564570', class: classes }, h("div", { key: 'c83d80624069c9de3b5d3e9590768f665ff932eb', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: 'aaa496c0b988ff38c1a6a9f124a2c7cba0a3737b', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '0f3aa04c550b93a438d787a3ac5fc7cf63901d4e', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'beba8206a20ef362e09a6b5eed22dd4c4b8e2e7e', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: 'ba1d0751a322cc95951a9b54d9e852fb5e1a02ad', name: "image" }))), h("div", { key: '3c54151f234ecb63e6a566701570de134d279d0f', class: "stzh-pagetitle-home__container" }, h("div", { key: '6edd0a5fd28de8674d1d0d57f6fe5a1518ef4454', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '05a2ca13f4ec83638baea131080d0683045aa589', class: "stzh-pagetitle-home__text" }, h("div", { key: '37435fdc6e5065d20ec4c7ccde6aec51bcd2f1b1', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'daa27aa84c4b8704fe01bd0b4a56dc78bf273d8e', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: 'cd104e93ee0dcc79f5a6707b2f8baf1cb609fde0', name: "readspeaker" }))), h("div", { key: '0f0976d0c4e2d5cbee42e85255d10c40bb9dc7bb', class: "stzh-pagetitle-home__heading" }, h("slot", { key: 'c1758088a81b1de6d8ef07dd324ae844ec60f8c2', name: "heading" })), h("div", { key: '55de194341f1d07364d4d030120a34bf3c0fa347', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'de008a5747939645e88dd973453a6cee4cd0eb78', name: "subheading" }))))))));
+        return (h(Host, { key: 'dec700a88230f0d919243eefd132dab55d8dae84', "has-image": imageSlotUsed }, h("div", { key: '1667eae85ab61a87bf6ae19142f2b3e197a9148a', class: classes }, h("div", { key: 'c1a2c06c6f587b8674d4c7a0a43344964a8d7ae1', class: "stzh-pagetitle-home__image-wrapper" }, h("stzh-ratio", { key: '197b547f5af8e8472c43be0093e58499711089db', ratio: "1:1", ratioSmall: "16:9", ratioMedium: "2:1", ratioLarge: "21:9", class: "stzh-pagetitle-home__ratio" }), h("div", { key: '41ee1dfbc01fe94ab4b1a4a17db4d0c130cba179', class: "stzh-pagetitle-home__image-gradient" }), h("div", { key: 'a054390e29deb379d34f7757cb57bdf947c489f3', class: "stzh-pagetitle-home__image-inner-wrapper" }, h("slot", { key: '0b18905f420423cf45fbb3b83577a71a23ed0a8e', name: "image" }))), h("div", { key: '32580081233599ff9a4fd19329c7888c03783189', class: "stzh-pagetitle-home__container" }, h("div", { key: '4bac4a7e6c62018a9f29d251757c55e93cfafdfc', class: "stzh-pagetitle-home__wrapper" }, h("div", { key: '142f1fe80210602d572c64f6177f3e31cffd6b7c', class: "stzh-pagetitle-home__text" }, h("div", { key: 'f4e3c51caa17ad3ce87457f12a923f24e4e13432', class: "stzh-pagetitle-home__meta" }, h("div", { key: 'f9984c81b2307be0c1ebba4f9a7590bb3a70fb68', class: "stzh-pagetitle-home__readspeaker" }, h("slot", { key: '4b7edbba6ad0c61ba1a193d88ca6eeba949083e2', name: "readspeaker" }))), h("div", { key: '9c2808c46d72d17d26d870cd145186b54a417ef8', class: "stzh-pagetitle-home__heading" }, h("slot", { key: '5acd17edc64b458aa65950af4c14f48dafb99603', name: "heading" })), h("div", { key: 'f35d7ee32f59b2cbda19a5cb5a5ee10092f014a1', class: "stzh-pagetitle-home__subheading" }, h("slot", { key: 'db5ca66dfb616df1049f1ce8ddf6dc24ba4d5ea3', name: "subheading" }))))))));
     }
     get element() { return this; }
     static get style() { return StzhPagetitleHomeStyle0; }

package/dist/components/stzh-pagetitle.js CHANGED Viewed

@@ -133,7 +133,7 @@ const StzhPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class StzhPagetitle ext
             "stzh-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pagetitle--background-${this.background}`]: !!this.background,
         };
-        return (h(Host, { key: '85edf2fc9a88ff38407fc20ce1d2414e335206db' }, h("div", { key: '1ef9a48d698c3da53f3275a576ac9c7ebde579e1', class: classes }, h("div", { key: '67dbe586811c10888d71d5b493f042f8eb19032a', class: "stzh-pagetitle__container" }, h("div", { key: 'af677f8d08bb09bb7f64a623f5481a6479664632', class: "stzh-pagetitle__wrapper" }, h("div", { key: '3c6ce9cec95a83e3a2d06f8fe02c90697de937f7', class: "stzh-pagetitle__text" }, h("div", { key: '297c10abcc611bc352029d101525a3738eaeca75', class: "stzh-pagetitle__meta" }, h("div", { key: 'a6f1eede7a640753c362caf174d9b605a46174c2', class: "stzh-pagetitle__tag" }, h("slot", { key: '7f36a9318d11fb6629017d98ce297768d6f59085', name: "tag" })), h("div", { key: '79818b1e7bff0d4688a44faf5e163d8169645769', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: 'a6105944aa39451e979c98ee5fe6dbd356f2d949', name: "readspeaker" }))), this.dateline && h("div", { key: 'fdbc1611e59d1b44ad750ca57d20e5f3fd00cc3c', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: '918dfc77a90d9e5f663b11b82528555fbf34e3ae', class: "stzh-pagetitle__heading" }, h("slot", { key: '764b58dbe204d5f702421635b10545a7fd7aa40a', name: "heading" })), h("div", { key: '53f51493a9e54395ee7877b9a7aa73fae734847f', class: "stzh-pagetitle__lead" }, h("slot", { key: '7d049ffcb6a5645a62bbda184f7c033135535cbe', name: "lead" }))), h("div", { key: 'be1e1875fcecd2eaca274741ba4639f1abf21810', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: 'e3451938296db8ae3f96abe07f1a5779ca04d6b6', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: '95d47ca275baa6742ed0cacf7192540ce45c9973', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: '03dc14fb203cbb722cb177eebad2c8d3d4a05e94', name: "image" }))), h("div", { key: 'fc4772400a661c0627d887248a9802072e665f02', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: 'fdf89bb18f05c94893009d93d6ecb73a870dda58', name: "disturber" })))))));
+        return (h(Host, { key: 'a22098979f8de99cc3dc031b5ce498f0556ced71' }, h("div", { key: 'a07a34b2cb5c97e0903931882edc7dbc8251c83e', class: classes }, h("div", { key: 'cd84ba6a71765c7a3705af2d82263aa090b0a830', class: "stzh-pagetitle__container" }, h("div", { key: '557f36cb59210ff79d304e4174f755cd5e20c233', class: "stzh-pagetitle__wrapper" }, h("div", { key: '65746bb0d3d3ed9de4f7d3cb3f4057843c5efc75', class: "stzh-pagetitle__text" }, h("div", { key: '1249a0da4cdf0d909320899e872f5a9540f9cef8', class: "stzh-pagetitle__meta" }, h("div", { key: '16e71f278b85676ba67b5a9e1db2baaa95c5c484', class: "stzh-pagetitle__tag" }, h("slot", { key: 'd392df7260db7cc5527fb9740c4f5c807b73a4f8', name: "tag" })), h("div", { key: '1f6c244d4beb5d31b76101780353a398a305864e', class: "stzh-pagetitle__readspeaker" }, h("slot", { key: '18918620ce3693cc9dea1051c425aefabbab660e', name: "readspeaker" }))), this.dateline && h("div", { key: 'f8302af04207e487df2e4960c079d98d28ed4a14', class: "stzh-pagetitle__dateline" }, this.dateline), h("div", { key: 'ff0b6fa76ed6be8f186cdcad4facc0d06d216839', class: "stzh-pagetitle__heading" }, h("slot", { key: '87dfe8db40e383a54d23f46ec017348cf6fcb87f', name: "heading" })), h("div", { key: '0025e46377888d1ef18b6c56a95608d23843211b', class: "stzh-pagetitle__lead" }, h("slot", { key: 'a5d2b1f64ebfaf8b2eeed2ee47bd8a8a883afe08', name: "lead" }))), h("div", { key: '427db7b58efc2964dad68a69a75b487dc7251c68', class: "stzh-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '3f192e843e637652040a13a40c0283432c46715b', ratio: "16:9", ratioSmall: "3:2", ratioMedium: "16:9", class: "stzh-pagetitle__ratio" }), h("div", { key: 'd57a78fd58f118abf015b626c6a088e5bc43d7a1', class: "stzh-pagetitle__image-inner-wrapper" }, h("slot", { key: 'cfdec1f4653228f7124fd38301a2795198d02101', name: "image" }))), h("div", { key: '20978ec4179fb3777b6fb7c3e1e1dfbbb194497e', class: "stzh-pagetitle__disturber", ref: el => (this.disturberElement = el) }, h("slot", { key: '7390ca6ee2c0f44e95103fbe3056d39ffcbcf29d', name: "disturber" })))))));
     }
     get element() { return this; }
     static get style() { return StzhPagetitleStyle0; }

package/dist/components/stzh-pagination.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as StzhPagination$1, d as defineCustomElement$1 } from './p-27bf6b87.js';
+import { S as StzhPagination$1, d as defineCustomElement$1 } from './p-0e787824.js';
 const StzhPagination = StzhPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-panorama.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$b } from './p-b8fda153.js';
-import { d as defineCustomElement$a } from './p-ec5e2f2a.js';
-import { d as defineCustomElement$9 } from './p-3d9ce94f.js';
+import { d as defineCustomElement$b } from './p-6a1a040f.js';
+import { d as defineCustomElement$a } from './p-775cca3b.js';
+import { d as defineCustomElement$9 } from './p-f07fda42.js';
 import { d as defineCustomElement$8 } from './p-fc668f7b.js';
 import { d as defineCustomElement$7 } from './p-60d4ef07.js';
-import { d as defineCustomElement$6 } from './p-2d80d228.js';
+import { d as defineCustomElement$6 } from './p-31108932.js';
 import { d as defineCustomElement$5 } from './p-472ab25f.js';
 import { d as defineCustomElement$4 } from './p-955f381a.js';
 import { d as defineCustomElement$3 } from './p-519479b8.js';

package/dist/components/stzh-pi-content-navigation.js CHANGED Viewed

@@ -52,7 +52,7 @@ const StzhPiContentNavigation$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiC
             "stzh-pi-content-navigation--is-navigation-level-1-or-2": isNavigationLevel1or2,
         };
         const CardLink = this.href ? "a" : "button";
-        return (h(Host, { key: 'a3fd38b13f204da18ff2cd87a7e95d325a45ba33', "has-lead": hasLead }, h("article", { key: '4407073abea135beca06925a13b99dac867afc17', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: 'f42819cacaad708ee4093b76ea93449d8b79c8ae', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: 'eefb2ee794458a1e05d57034d335526c22675230', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: '09387c9e0fb9b8526a4aab1983a2f621e5b49093', ratio: "2:1" }, h("slot", { key: '67c47c251162891ba28286a94f91a90b5280dfb4', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '31aeb48e1897bd717f2618b5e4235305a6d6be7b', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: 'b1a488d455af3da7fba0d926d0d4c0acd9ec4f9b', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '1c1695ad670a4f94e260077c6d8c0ffefe37600a', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: 'cafeeac85332c4ba22a1dd6e8700ddef67b59ef1', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '09405b42dc576bddb3f31c74f99ee4e152f4e8c0', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
+        return (h(Host, { key: '933d0b13186f03a4ce042c8d72f205fa011e11b2', "has-lead": hasLead }, h("article", { key: '3cc3c0f63e068e954dc3b5a0396a53bfb8e1eb5c', class: classes, "aria-label": this.heading, role: "listitem" }, h(CardLink, { key: '871106e609ccb048597e683dcb1ee53b2e387119', ref: el => (this.cardLinkElement = el), class: "stzh-pi-content-navigation__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { key: '840776e707a0ca2107fe8b242627b2b8635f1358', class: "stzh-pi-content-navigation__image" }, h("stzh-ratio", { key: '304c98a4a7ea699d5214c525dea8468fded38c20', ratio: "2:1" }, h("slot", { key: 'a69c424f1e474b2bae06621bab40ee788269d06a', name: "image" }))), shouldRenderTitleRatio && (h("div", { key: '6580dff4bd9bf671d9b4391bbc6c0417c39b5d1d', class: "stzh-pi-content-navigation__title-ratio" }, this.renderHeading())), h("div", { key: '7b3e44b1e6cdc3c21719940fec71a8ae143039e0', class: "stzh-pi-content-navigation__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), hasLead && (h("div", { key: '5d75d6476fd7087fdd15f9cf908c915804b68c99', class: "stzh-pi-content-navigation__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })))), h("div", { key: '49c5ca735da434e56acd40876390a3a09a7292f9', class: "stzh-pi-content-navigation__arrow" }, h("stzh-icon", { key: '552c7d67259cff681582a4d7a741a5f9cbe03b4a', class: "stzh-pi-content-navigation__arrow-icon", name: "arrow-right" }))))));
     }
     get element() { return this; }
     static get style() { return StzhPiContentNavigationStyle0; }

package/dist/components/stzh-pi-menu.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener
 import { d as defineCustomElement$3 } from './p-4ea49c40.js';
 import { d as defineCustomElement$2 } from './p-60d4ef07.js';
-const stzhPiMenuCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-left:var(--stzh-pi-menu-padding-left, 20px);--trigger-size:var(--stzh-icon-size-large);--trigger-color:var(--stzh-color-black);--content-background:var(--stzh-color-primary20);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-black);--button-background-color:var(--stzh-color-primary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-primary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}.stzh-pi-menu{height:100%;transition:width 0.15s ease;width:100%;z-index:1;position:absolute;scrollbar-color:var(--stzh-color-primary40) var(--content-background);}.stzh-pi-menu::-webkit-scrollbar{width:0.5rem}.stzh-pi-menu::-webkit-scrollbar-thumb{background-color:var(--stzh-color-primary40)}.stzh-pi-menu::-webkit-scrollbar-track{background:var(--content-background)}.stzh-pi-menu--fixed{position:fixed;top:0;height:auto;bottom:0}.stzh-pi-menu__heading{margin:0;position:sticky;top:0}.stzh-pi-menu__backdrop{position:absolute;z-index:-1;top:0;width:0;height:0;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-pi-menu__backdrop--visible{width:100vw;height:100vh;opacity:1;pointer-events:auto}.stzh-pi-menu__button{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding-left:var(--stzh-space-none);padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-none);padding-bottom:var(--stzh-space-none);width:100%;min-height:var(--stzh-space-xbig);appearance:none;display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button{padding-left:calc((100vw - 100rem) / 2);padding-right:var(--stzh-space-medium)}}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button{transition:none}}.stzh-pi-menu__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-pi-menu__button-spacer{visibility:hidden;pointer-events:none}.stzh-pi-menu__subheading{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:var(--stzh-space-small) var(--stzh-space-medium);hyphens:auto}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__subheading{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__content-inner{background-color:var(--content-background);overflow-y:hidden}.stzh-pi-menu__button-text{flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{transition:none}}.stzh-pi-menu__button-icon-in-menu{--size:var(--icon-size);color:var(--stzh-color-black);margin-left:auto}.stzh-pi-menu__button-icon-in-menu:hover{color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-pi-menu__button-icon-in-menu{display:none}}.stzh-pi-menu__sub-menu{display:flex;padding-right:var(--stzh-space-medium);align-items:center}@media screen and (min-width: 900px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon{color:var(--hover-trigger-color)}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::before,.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-pi-menu__content{height:calc(100vh - 4rem);width:100%}@media print{.stzh-pi-menu__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-pi-menu stzh-details .stzh-details--is-open .stzh-pi-menu__button-icon-in-menu{transform:rotate(180deg)}.stzh-pi-menu stzh-details .stzh-details__content-inner{padding-top:var(--stzh-space-none)}.stzh-pi-menu__nav{padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-none)}.stzh-pi-menu__nav-list{list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0}@media screen and (min-width: 900px){.stzh-pi-menu__nav-list.is-level-2{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item{display:block;padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-left:var(--padding-left);text-decoration:none;color:var(--stzh-color-black)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item:hover{color:var(--stzh-color-primary70)}.stzh-pi-menu__nav-item.active{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__nav-item.is-level-1{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding:var(--stzh-space-small) var(--stzh-space-medium)}@media screen and (max-width: 899px){.stzh-pi-menu__nav-item.is-level-1{height:2.75rem;align-content:center}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-1{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-1{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__nav-item.is-level-2{line-height:var(--stzh-space-xlarge);padding:var(--stzh-space-xsmall) var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-2{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-2{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-xxlarge));padding-right:var(--stzh-space-xxlarge)}}.stzh-pi-menu__button-space-helper{visibility:hidden;pointer-events:none}.stzh-pi-menu--is-open .stzh-pi-menu__button-icon{transform:rotate(180deg)}.stzh-pi-menu--is-open .stzh-pi-menu__content-inner{overflow-y:auto;height:calc(100vh - 4rem)}";
+const stzhPiMenuCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-left:var(--stzh-pi-menu-padding-left, 20px);--trigger-size:var(--stzh-icon-size-large);--trigger-color:var(--stzh-color-black);--content-background:var(--stzh-color-primary20);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-black);--button-background-color:var(--stzh-color-primary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-primary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}.stzh-pi-menu{height:100%;transition:width 0.15s ease;width:100%;z-index:1;position:absolute;scrollbar-color:var(--stzh-color-primary40) var(--content-background);}.stzh-pi-menu::-webkit-scrollbar{width:0.5rem}.stzh-pi-menu::-webkit-scrollbar-thumb{background-color:var(--stzh-color-primary40)}.stzh-pi-menu::-webkit-scrollbar-track{background:var(--content-background)}.stzh-pi-menu--fixed{position:fixed;top:0;height:auto}.stzh-pi-menu__heading{margin:0;position:sticky;top:0}.stzh-pi-menu__backdrop{position:absolute;z-index:-1;top:0;width:0;height:0;background-color:var(--stzh-color-black40op);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-pi-menu__backdrop--visible{width:100vw;height:100vh;opacity:1;pointer-events:auto}.stzh-pi-menu__button{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding-left:var(--stzh-space-none);padding-right:var(--stzh-space-medium);padding-top:var(--stzh-space-none);padding-bottom:var(--stzh-space-none);width:100%;min-height:var(--stzh-space-xbig);appearance:none;display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-pi-menu__button{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__button{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button{padding-left:calc((100vw - 100rem) / 2);padding-right:var(--stzh-space-medium)}}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button{transition:none}}.stzh-pi-menu__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-pi-menu__button-spacer{visibility:hidden;pointer-events:none}.stzh-pi-menu__subheading{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);margin:0;padding:var(--stzh-space-small) var(--stzh-space-medium);hyphens:auto}@media screen and (min-width: 900px){.stzh-pi-menu__subheading{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-pi-menu__subheading{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-pi-menu__subheading{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__content-inner{background-color:var(--content-background);overflow-y:hidden}.stzh-pi-menu__button-text{flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__button-text{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-pi-menu__button-icon,.stzh-pi-menu__button-icon-in-menu{transition:none}}.stzh-pi-menu__button-icon-in-menu{--size:var(--icon-size);color:var(--stzh-color-black);margin-left:auto}.stzh-pi-menu__button-icon-in-menu:hover{color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-pi-menu__button-icon-in-menu{display:none}}.stzh-pi-menu__sub-menu{display:flex;padding-right:var(--stzh-space-medium);align-items:center}@media screen and (min-width: 900px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__sub-menu{padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon{color:var(--hover-trigger-color)}.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::before,.stzh-pi-menu__button:hover .stzh-pi-menu__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-pi-menu__content{height:calc(100vh - 4rem);width:100%}@media print{.stzh-pi-menu__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-pi-menu stzh-details .stzh-details--is-open .stzh-pi-menu__button-icon-in-menu{transform:rotate(180deg)}.stzh-pi-menu stzh-details .stzh-details__content-inner{padding-top:var(--stzh-space-none)}.stzh-pi-menu__nav{padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-none)}.stzh-pi-menu__nav-list{list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0}@media screen and (min-width: 900px){.stzh-pi-menu__nav-list.is-level-2{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item{display:block;padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall);padding-left:var(--padding-left);text-decoration:none;color:var(--stzh-color-black)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-menu__nav-item{padding-bottom:var(--stzh-space-small)}}.stzh-pi-menu__nav-item:hover{color:var(--stzh-color-primary70)}.stzh-pi-menu__nav-item.active{background-color:var(--stzh-color-primary30)}.stzh-pi-menu__nav-item.is-level-1{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);padding:var(--stzh-space-small) var(--stzh-space-medium)}@media screen and (max-width: 899px){.stzh-pi-menu__nav-item.is-level-1{height:2.75rem;align-content:center}}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-1{padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-1{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-medium));padding-right:var(--stzh-space-medium)}}.stzh-pi-menu__nav-item.is-level-2{line-height:var(--stzh-space-xlarge);padding:var(--stzh-space-xsmall) var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-menu__nav-item.is-level-2{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1600px){.stzh-pi-menu__nav-item.is-level-2{padding-left:calc((100vw - 100rem) / 2 + var(--stzh-space-xxlarge));padding-right:var(--stzh-space-xxlarge)}}.stzh-pi-menu__button-space-helper{visibility:hidden;pointer-events:none}.stzh-pi-menu--is-open .stzh-pi-menu__button-icon{transform:rotate(180deg)}.stzh-pi-menu--is-open .stzh-pi-menu__content-inner{overflow-y:auto;height:calc(100vh - 4rem)}";
 const StzhPiMenuStyle0 = stzhPiMenuCss;
 const ANIMATION_SHOW = {
@@ -263,7 +263,7 @@ const StzhPiMenu$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiMenu extends H
         // Screens medium, large and ultra
         const wideScreens = `${this.entangledMenuSize}px`;
         const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;
-        return (h(Host, { key: 'f8b2a64582df45c8f125c3b0b41fe9f4d72ec6e3', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '6d91d3726087d07be15d6aae92744934d4625332', class: "stzh-pi-menu-positioner" }, h("div", { key: '2e9e4f99be510acf7dd7c7e3d2ec3fc41b8c6580', class: classes, style: { width: menuWidth } }, h("div", { key: '275e750ac7ff5a0c3c341aba864bf40d11a1a80f', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '58e00809ae1ed9b03459b915411dba1ae64935e7', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: 'e9e5da54d955b7fcecc6fab3d2a30f18fbbdd57c', 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 }, h("span", { key: '9a291dfdc959bb51d52078e393b9b244ab3b00d3', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: 'd9857c53ba80eadbaa361e8481090a374f0cac7a', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: 'a1ac8833c9e0da632a3562a4158638674170dbd5', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'e61224ef67247a17903e17641c4e9bd47e50d56b', class: "stzh-pi-menu__content-inner" }, h("nav", { key: '02148b9b7835b346647290df6eedb04fcef9d1c2', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: '70b7a60a240b0614244aba0f85a323566c2739f0', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '1dc8ef72f010b19f93ef42786663d097c58a2a7e', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: 'd259bf2a875cbb61909a6f6fb82fd31979c55545', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: '15d3be269c621e14a65c35da1ad1dd2c87a91d92', class: "stzh-pi-menu__button-text" }, h("span", { key: '962a97062b0ca6f24980c42daccae70d61369d83', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: 'a7f89b1cabf65ed4f740de036bd4bf8c460c72ff', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
+        return (h(Host, { key: '4a41dfcd7683f6705a508f0916f9c3f7789563b9', tabindex: this.rootTabindex, onFocus: this.onRootFocus }, h("div", { key: '2d7b0638148fa25233e49047a68c11b2a798bd16', class: "stzh-pi-menu-positioner" }, h("div", { key: '6a10a835713b348acc58de50656588bed75ab8af', class: classes, style: { width: menuWidth } }, h("div", { key: '9a113878c7d0b2141b8b32f69a5a6ff06766c026', class: backdropClasses, onClick: this.handleBackdropClick }), h(Heading, { key: '62ba6a3628903ee0917b0fe4de30abfd5ffd6c7f', class: "stzh-pi-menu__heading", onClick: this.handleHeaderClick }, h("button", { key: 'd97dc770a1e6e336f0da219c46fce371a85e0344', 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 }, h("span", { key: '7903e59143a9aa8e3ddbd506c7ab2e3d0f5d7908', class: "stzh-pi-menu__button-text" }, this.heading), h("stzh-icon", { key: 'b3aea4c0367724c7932b5809f7c16dc98cdd969b', name: "angle-down", class: "stzh-pi-menu__button-icon" }))), h("div", { key: '5598323cd7c6a02f562d4d992effbdabe5e63ef5', id: `${this.piMenuId}-content`, ref: el => (this.bodyElement = el), class: "stzh-pi-menu__content", "aria-labelledby": `${this.piMenuId}-header`, role: "region" }, h("div", { key: 'f4b7db6738a5505a08ad70fca33bae6446c06e9f', class: "stzh-pi-menu__content-inner" }, h("nav", { key: '34fb0b913daf8b6bf420e1b1403049613422f02a', class: "stzh-pi-menu__nav", "aria-label": this.localization.menuLabel }, this.subheading && h("p", { key: 'bff84f745a2fd5760de654b3b45559503e587439', class: "stzh-pi-menu__subheading" }, this.subheading), h("ul", { key: '9a305c8cc16ebf5dae535b1aa96200f9a0a8f1ee', class: "stzh-pi-menu__nav-list is-level-1" }, this._menuItems.map((item, index) => (h("li", { class: "stzh-pi-menu__nav-list-item" }, this.isMedium || this.isLarge || this.isUltra ? (h("div", null, this.setSubMenuHeader(item), this.setSubMenuItems(item))) : (h("stzh-details", { open: index === 0 }, this.setSubMenuHeader(item), h("div", { slot: "content" }, this.setSubMenuItems(item)))))))))))), h("button", { key: '82c2faf25baed08281a04cfce41a2b3595da213a', class: "stzh-pi-menu__button stzh-pi-menu__button-space-helper", "aria-hidden": "true", type: "button" }, h("span", { key: '168b13fa86ee14f319b57d27fd2317462e19c0f1', class: "stzh-pi-menu__button-text" }, h("span", { key: 'e02805291546e7fde2f4fd5040797c10bb64e37e', class: "stzh-pi-menu__heading-text" }, this.heading)), h("stzh-icon", { key: '6264a9efd0df0882d06cd18b2e094b591448c574', name: "angle-down", class: "stzh-pi-menu__button-icon" })))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/stzh-pi-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pi-menu.js","mappings":"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","names":["StzhPiMenu"],"sources":["src/components/CMS/stzh-pi-menu/stzh-pi-menu.scss?tag=stzh-pi-menu&encapsulation=shadow","src/components/CMS/stzh-pi-menu/stzh-pi-menu.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-menu-padding-left\n /\n\n:host {\n --padding-left: var(--stzh-pi-menu-padding-left, #{$containerMargin});\n --trigger-size: #{iconSize(large)};\n --trigger-color: #{$colorBlack};\n --content-background: #{$colorPrimary20};\n --icon-size: #{iconSize()};\n --button-color: #{$colorBlack};\n --button-background-color: #{$colorPrimary30};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: #{$colorPrimary40};\n --hover-trigger-color: var(--trigger-color);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n.stzh-pi-menu {\n height: 100%;\n transition: width 0.15s ease;\n width: 100%;\n z-index: 1;\n position: absolute;\n\n / Scrollbar styling /\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--stzh-color-primary40);\n }\n\n &::-webkit-scrollbar-track {\n background: var(--content-background);\n }\n\n scrollbar-color: var(--stzh-color-primary40) var(--content-background);\n\n &--fixed {\n position: fixed;\n top: 0;\n height: auto;\n bottom: 0;\n }\n\n &__heading {\n margin: 0;\n position: sticky;\n top: 0;\n }\n\n &__backdrop {\n position: absolute;\n z-index: -1;\n top: 0;\n width: 0;\n height: 0;\n background-color: $colorBlack40op;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &--visible {\n width: 100vw;\n height: 100vh;\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &__button {\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n padding-left: space(\"none\");\n padding-right: space(\"medium\");\n\n padding-top: space(\"none\");\n padding-bottom: space(\"none\");\n\n width: 100%;\n min-height: space(\"xbig\");\n appearance: none;\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xsmall);\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border: none;\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n cursor: pointer;\n @include mq(\"medium\") {\n padding-right: space(\"small\");\n }\n @include mq($from: large) {\n @include fontSize(\"deci\");\n @include fontSize(\"deci\");\n }\n @include mq($from: ultra) {\n padding-left: calc(((100vw - #{map-get($breakpoints, \"ultra\")})) / 2);\n padding-right: space(\"medium\");\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button-spacer {\n visibility: hidden;\n pointer-events: none;\n }\n\n &__subheading {\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n margin: 0;\n padding: space(\"small\") space(\"medium\");\n hyphens: auto;\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n\n @include mq($from: large) {\n @include fontSize(\"deci\");\n }\n\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n );\n padding-right: space(\"medium\");\n }\n }\n\n &__content-inner {\n background-color: var(--content-background);\n overflow-y: hidden;\n }\n\n &__button-text {\n flex-grow: 1;\n padding-left: space(\"medium\");\n\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-left: space(\"medium\");\n padding-right: space(\"medium\");\n }\n }\n\n &__button-icon,\n &__button-icon-in-menu {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: 500ms;\n color: var(--trigger-color);\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &__button-icon-in-menu {\n --size: var(--icon-size);\n color: var(--stzh-color-black);\n margin-left: auto;\n\n &:hover {\n color: var(--stzh-color-primary70);\n }\n @include mq(\"medium\") {\n display: none;\n }\n }\n &__sub-menu {\n display: flex;\n padding-right: space(\"medium\");\n align-items: center;\n\n @include mq($from: medium) {\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-right: space(\"medium\");\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n color: var(--hover-trigger-color);\n }\n\n &__content {\n height: calc(100vh - 64px);\n width: 100%;\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n stzh-details {\n .stzh-details--is-open {\n .stzh-pi-menu__button-icon-in-menu {\n transform: rotate(180deg);\n }\n }\n .stzh-details__content-inner {\n padding-top: space(\"none\");\n }\n }\n / Nav /\n\n &__nav {\n padding-bottom: var(--stzh-space-xlarge);\n padding-left: space(\"none\");\n }\n\n &__nav-list {\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n\n &__nav-list.is-level-2 {\n @include mq($from: medium) {\n padding-bottom: space(\"small\");\n }\n }\n\n &__nav-item {\n display: block;\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-right\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-right\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n padding-left: var(--padding-left);\n text-decoration: none;\n color: var(--stzh-color-black);\n\n &:hover {\n color: var(--stzh-color-primary70);\n }\n }\n\n &__nav-item.active {\n background-color: var(--stzh-color-primary30);\n }\n\n &__nav-item.is-level-1 {\n @include font(\"heavy\");\n\n padding: space(\"small\") space(\"medium\");\n @include mq($to: medium) {\n height: 44px;\n align-content: center;\n }\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n );\n padding-right: space(\"medium\");\n }\n }\n\n &__nav-item.is-level-2 {\n line-height: space(\"xlarge\");\n padding: space(\"xsmall\") space(\"xxlarge\");\n\n @include mq($from: medium) {\n padding-left: space(\"xlarge\");\n padding-right: space(\"xlarge\");\n }\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"xxlarge\")\n );\n padding-right: space(\"xxlarge\");\n }\n }\n\n &__button-space-helper {\n visibility: hidden;\n pointer-events: none;\n }\n\n / Open /\n\n &--is-open {\n .stzh-pi-menu__button-icon {\n transform: rotate(180deg);\n }\n\n .stzh-pi-menu__content-inner {\n overflow-y: auto;\n height: calc(100vh - 64px);\n\n // @include mq($from: small) {\n // height: calc(100vh - 72px);\n // }\n\n // @include mq($from: medium) {\n // height: calc(100vh - 80px);\n // }\n\n // @include mq($from: medium) {\n // height: calc(100vh - 96px);\n // }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhPiMenuClosedEvent,\n StzhPiMenuCloseEvent,\n StzhPiMenuItemClickEvent,\n StzhPiMenuOpenedEvent,\n StzhPiMenuOpenEvent,\n StzhPiPagetitleMenuItem,\n} from \"../../../index\";\n\nimport { waitForEvent } from \"../../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"100%\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"100%\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n// const CLASS_BODY_OPEN = \"stzh-header-open\";\n\n@Component({\n tag: \"stzh-pi-menu\",\n styleUrl: \"stzh-pi-menu.scss\",\n shadow: true,\n})\nexport class StzhPiMenu {\n /* Translation strings /\n @Prop() localization: StzhPiMenuLocalization;\n\n /* Menu navigation items /\n @Prop() menuItems: StzhPiPagetitleMenuItem[] \| string = [];\n private _menuItems: StzhPiPagetitleMenuItem[];\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Heading title /\n @Prop() subheading: string = \"\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* If the menu is fixed (when otherwise no longer in viewport) or statically positioned. /\n @State() menuIsFixed: boolean = false;\n\n /* Used to sync width of stzh-pi-menu-positioner (in-flow element) with stzh-pi-menu (gets taken out of flow with menuIsFixed, but must stay the same width) /\n @State() entangledMenuSize: number = 20;\n\n @State() showBackdrop: boolean = false;\n\n /* Break points for displays /\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n @State() isLarge: boolean;\n @State() isUltra: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhPiMenuElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n /* Metanav item click event /\n @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n @Watch(\"menuItems\")\n menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._menuItems = JSON.parse(newValue);\n } else {\n this._menuItems = newValue;\n }\n\n this._menuItems = this._menuItems.map((menuItem, index) => ({\n id: `submenu-${index}`,\n ...menuItem,\n }));\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-pi-menu\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n // this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-pi-menu\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-pi-menu\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-pi-menu\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show piMenu item content /\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n // this.menuIsFixed && document.body.classList.add(CLASS_BODY_OPEN);\n if (!this.isMedium && !this.isLarge && !this.isUltra) {\n this.showBackdrop = true;\n }\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide content /\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n // document.body.classList.remove(CLASS_BODY_OPEN);\n this.showBackdrop = false;\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle piMenu item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @State() rootTabindex: number = 0;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n private buttonElement: HTMLButtonElement;\n private piMenuId: string;\n private focusedByInput: boolean = false;\n\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.buttonElement.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private handleMenuItemClick = (event: MouseEvent) => {\n this.stzhMenuItemClick.emit({\n component: \"stzh-pi-menu\",\n originalEvent: event,\n });\n };\n\n private handleBackdropClick = async () => {\n this.showBackdrop = false;\n this.hide();\n };\n\n private setEntangledMenuSize = () => {\n const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n this.entangledMenuSize = menuEl.getBoundingClientRect().width;\n };\n\n private menuObserver: IntersectionObserver;\n private resizeTimeout: number;\n\n private handleMenuIntersection = (entries: IntersectionObserverEntry[]) => {\n entries.forEach(entry => {\n if (entry.intersectionRatio < 1 && entry.boundingClientRect.top < 20) {\n this.menuIsFixed = true;\n } else {\n this.menuIsFixed = false;\n }\n });\n };\n\n private setSubMenuHeader(item) {\n return (\n <div class=\"stzh-pi-menu__sub-menu\">\n <a\n href={item.href}\n onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n class={{\n \"stzh-pi-menu__nav-item\": true,\n \"is-level-1\": true,\n active: item.active,\n }}\n >\n {item.label}\n </a>{\" \"}\n {item.items?.length ? <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon-in-menu\"></stzh-icon> : \"\"}\n </div>\n );\n }\n private setSubMenuItems(item) {\n if (!item.items?.length) return null;\n return (\n <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n {item.items.map(item => (\n <li class=\"stzh-pi-menu__nav-list-item\">\n <a\n href={item.href}\n onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n class={{\n \"stzh-pi-menu__nav-item\": true,\n \"is-level-2\": true,\n active: item.active,\n }}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n );\n }\n\n private mediaChangeHandler = () => {\n // update a state for example to update component template depending on breakpoint state\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n this.isLarge = media(\"large\").matches;\n this.isUltra = media(\"ultra\").matches;\n if (this.isMedium \|\| this.isLarge \|\| this.isUltra) {\n this.showBackdrop = false;\n this.open = true;\n } else {\n if (this.open) {\n this.showBackdrop = true;\n }\n }\n };\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n }\n\n async componentWillLoad() {\n this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n this.menuItemsWatcher(this.menuItems);\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n }\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n\n this.menuObserver = new IntersectionObserver(this.handleMenuIntersection, { rootMargin: \"0px\", threshold: 1 });\n const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n this.menuObserver.observe(menuEl);\n this.setEntangledMenuSize();\n this.mediaChangeHandler();\n\n // Open status for medium, large and ultra screens\n if (this.isMedium \|\| this.isLarge \|\| this.isUltra) {\n this.open = true;\n } else {\n this.open = false;\n }\n\n window.addEventListener(\n \"resize\",\n () => {\n if (this.resizeTimeout) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n this.resizeTimeout = window.requestAnimationFrame(() => {\n this.setEntangledMenuSize();\n });\n },\n false,\n );\n }\n\n disconnectedCallback() {\n if (this.menuObserver) {\n this.menuObserver.disconnect();\n }\n window.removeEventListener(\"resize\", () => {\n if (this.resizeTimeout) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n });\n removeMediaChangeListener(this.mediaChangeHandler);\n }\n\n render() {\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-pi-menu\": true,\n \"stzh-pi-menu--is-open\": this.open,\n \"stzh-pi-menu--fixed\": this.menuIsFixed,\n };\n\n const backdropClasses = {\n \"stzh-pi-menu__backdrop\": true,\n \"stzh-pi-menu__backdrop--visible\": this.showBackdrop,\n };\n\n const closed = \"8.0625rem\";\n\n // Screens micro and small\n const narrowScreens = \"19.6875rem\";\n\n // Screens medium, large and ultra\n const wideScreens = `${this.entangledMenuSize}px`;\n\n const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;\n\n return (\n <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n <div class=\"stzh-pi-menu-positioner\">\n <div class={classes} style={{ width: menuWidth }}>\n <div class={backdropClasses} onClick={this.handleBackdropClick}></div>\n\n {/ Header of the menu /}\n <Heading class=\"stzh-pi-menu__heading\" onClick={this.handleHeaderClick}>\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-pi-menu__button\"\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span class=\"stzh-pi-menu__button-text\">{this.heading}</span>\n <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n </button>\n </Heading>\n\n {/ Content of the menu */}\n <div\n id={`${this.piMenuId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-pi-menu__content\"\n aria-labelledby={`${this.piMenuId}-header`}\n role=\"region\"\n >\n <div class=\"stzh-pi-menu__content-inner\">\n <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n {this._menuItems.map((item, index) => (\n <li class=\"stzh-pi-menu__nav-list-item\">\n {this.isMedium \|\| this.isLarge \|\| this.isUltra ? (\n <div>\n {this.setSubMenuHeader(item)}\n {this.setSubMenuItems(item)}\n </div>\n ) : (\n <stzh-details open={index === 0}>\n {this.setSubMenuHeader(item)}\n <div slot=\"content\">{this.setSubMenuItems(item)}</div>\n </stzh-details>\n )}\n </li>\n ))}\n </ul>\n </nav>\n </div>\n </div>\n </div>\n <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n <span class=\"stzh-pi-menu__button-text\">\n <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n </span>\n <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pi-menu.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,8+UAA8+U,CAAC;AACrgV,yBAAe,aAAa;;ACe5B,MAAM,cAAc,GAAG;IACrB,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;QAC7B,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;KACjC;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB,SAAS,EAAE;QACT,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QAChC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;KAC9B;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C,CAAC;AAEF,IAAI,oBAAoB,GAAG,CAAC,CAAC;MAShBA,YAAU;;;;;;;;;;QA+Kb,oBAAe,GAAY,KAAK,CAAC;QAIjC,mBAAc,GAAY,KAAK,CAAC;QAEhC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;aAC5B;YAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B,CAAC;QAEM,wBAAmB,GAAG,CAAC,KAAiB;YAC9C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,SAAS,EAAE,cAAc;gBACzB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb,CAAC;QAEM,yBAAoB,GAAG;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;YACjF,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;SAC/D,CAAC;QAKM,2BAAsB,GAAG,CAAC,OAAoC;YACpE,OAAO,CAAC,OAAO,CAAC,KAAK;gBACnB,IAAI,KAAK,CAAC,iBAAiB,GAAG,CAAC,IAAI,KAAK,CAAC,kBAAkB,CAAC,GAAG,GAAG,EAAE,EAAE;oBACpE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;iBACzB;qBAAM;oBACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;iBAC1B;aACF,CAAC,CAAC;SACJ,CAAC;QA2CM,uBAAkB,GAAG;;YAE3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;gBACjD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;aAClB;iBAAM;gBACL,IAAI,IAAI,CAAC,IAAI,EAAE;oBACb,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;iBAC1B;aACF;SACF,CAAC;;yBAjRsD,EAAE;oBAIF,KAAK;uBAGnC,EAAE;0BAGC,EAAE;4BAGgC,GAAG;2BAGlC,KAAK;iCAGA,EAAE;4BAEN,KAAK;;;;;;4BAmJN,CAAC;;IAlHjC,gBAAgB,CAAC,QAA4C;QAC3D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;SAC5B;QAED,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,sBACpD,EAAE,EAAE,WAAW,KAAK,EAAE,IACnB,QAAQ,EACX,CAAC,CAAC;KACL;IAGD,MAAM,WAAW,CAAC,QAAiB;QACjC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO;SACR;QAED,IAAI,QAAQ,EAAE;YACZ,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,SAAS,EAAE,cAAc;iBAC1B,CAAC,CAAC;aACJ;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK,CAAC;YAEhC,MAAM,SAAS,CACb,IAAI,CAAC,WAAW,EAChB,uBAAuB,CAAC,cAAc,CAAC,SAAS,EAAE;gBAChD,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY;aACtC,CAAC,EACF,cAAc,CAAC,OAAO,CACvB,CAAC;;YAIF,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;oBACnB,SAAS,EAAE,cAAc;iBAC1B,CAAC,CAAC;aACJ;SACF;aAAM;YACL,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;oBAClB,SAAS,EAAE,cAAc;iBAC1B,CAAC,CAAC;aACJ;YAED,MAAM,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAEvC,MAAM,SAAS,CACb,IAAI,CAAC,WAAW,EAChB,uBAAuB,CAAC,cAAc,CAAC,SAAS,EAAE;gBAChD,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY;aACtC,CAAC,EACF,cAAc,CAAC,OAAO,CACvB,CAAC;YAEF,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YAEtC,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;oBACnB,SAAS,EAAE,cAAc;iBAC1B,CAAC,CAAC;aACJ;SACF;QAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;;IAID,MAAM,IAAI;QACR,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;;QAGD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACpD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACjD;;IAID,MAAM,IAAI;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;;QAGD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACjD;;IAID,MAAM,MAAM;QACV,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;SAC1B;aAAM;YACL,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;SAC1B;KACF;IAoDO,gBAAgB,CAAC,IAAI;;QAC3B,QACE,WAAK,KAAK,EAAC,wBAAwB,IACjC,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EACvD,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,YAAY,EAAE,IAAI;gBAClB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,IAEA,IAAI,CAAC,KAAK,CACT,EAAC,GAAG,EACP,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,iBAAW,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,mCAAmC,GAAa,GAAG,EAAE,CAC1G,EACN;KACH;IACO,eAAe,CAAC,IAAI;;QAC1B,IAAI,EAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAC;QACrC,QACE,UAAI,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAC,mCAAmC,IACvD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,UAAI,KAAK,EAAC,6BAA6B,IACrC,SACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAa,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EACvD,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,YAAY,EAAE,IAAI;gBAClB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,IAEA,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,EACL;KACH;IAkBD,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,oBAAoB,EAAE,EAAE,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;SACvG;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAErC,IAAI,CAAC,YAAY,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QAC/G,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QACjF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;;QAG1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;SAClB;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB;QAED,MAAM,CAAC,gBAAgB,CACrB,QAAQ,EACR;YACE,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACjD;YACD,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,qBAAqB,CAAC;gBAChD,IAAI,CAAC,oBAAoB,EAAE,CAAC;aAC7B,CAAC,CAAC;SACJ,EACD,KAAK,CACN,CAAC;KACH;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;SAChC;QACD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE;YACnC,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aACjD;SACF,CAAC,CAAC;QACH,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACpD;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,uBAAuB,EAAE,IAAI,CAAC,IAAI;YAClC,qBAAqB,EAAE,IAAI,CAAC,WAAW;SACxC,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,wBAAwB,EAAE,IAAI;YAC9B,iCAAiC,EAAE,IAAI,CAAC,YAAY;SACrD,CAAC;QAEF,MAAM,MAAM,GAAG,WAAW,CAAC;;QAG3B,MAAM,aAAa,GAAG,YAAY,CAAC;;QAGnC,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,iBAAiB,IAAI,CAAC;QAElD,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,aAAa,IAAI,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAC;QAEnH,QACE,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,IAC1D,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAC9C,4DAAK,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,mBAAmB,GAAQ,EAGtE,EAAC,OAAO,qDAAC,KAAK,EAAC,uBAAuB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IACpE,+DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,KAAK,EAAC,sBAAsB,mBACb,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAAE,EAChD,IAAI,EAAC,QAAQ,iBACA,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,IAE7C,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,kEAAW,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,2BAA2B,GAAa,CACpE,CACD,EAGV,4DACE,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,UAAU,EAC9B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EACpD,KAAK,EAAC,uBAAuB,qBACZ,GAAG,IAAI,CAAC,QAAQ,SAAS,EAC1C,IAAI,EAAC,QAAQ,IAEb,4DAAK,KAAK,EAAC,6BAA6B,IACtC,4DAAK,KAAK,EAAC,mBAAmB,gBAAa,IAAI,CAAC,YAAY,CAAC,SAAS,IACnE,IAAI,CAAC,UAAU,IAAI,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,UAAU,CAAK,EAC7E,2DAAI,KAAK,EAAC,mCAAmC,IAC1C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC/B,UAAI,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAC5C,eACG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CACvB,KAEN,oBAAc,IAAI,EAAE,KAAK,KAAK,CAAC,IAC5B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAC5B,WAAK,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAO,CACzC,CAChB,CACE,CACN,CAAC,CACC,CACD,CACF,CACF,CACF,EACN,+DAAQ,KAAK,EAAC,wDAAwD,iBAAa,MAAM,EAAC,IAAI,EAAC,QAAQ,IACrG,6DAAM,KAAK,EAAC,2BAA2B,IACrC,6DAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAQ,CACzD,EACP,kEAAW,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,2BAA2B,GAAa,CACpE,CACL,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhPiMenu"],"sources":["src/components/CMS/stzh-pi-menu/stzh-pi-menu.scss?tag=stzh-pi-menu&encapsulation=shadow","src/components/CMS/stzh-pi-menu/stzh-pi-menu.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-menu-padding-left\n /\n\n:host {\n --padding-left: var(--stzh-pi-menu-padding-left, #{$containerMargin});\n --trigger-size: #{iconSize(large)};\n --trigger-color: #{$colorBlack};\n --content-background: #{$colorPrimary20};\n --icon-size: #{iconSize()};\n --button-color: #{$colorBlack};\n --button-background-color: #{$colorPrimary30};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: #{$colorPrimary40};\n --hover-trigger-color: var(--trigger-color);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @include highContrast() {\n --trigger-color: CanvasText;\n\n --hover-trigger-color: CanvasText;\n }\n}\n\n.stzh-pi-menu {\n height: 100%;\n transition: width 0.15s ease;\n width: 100%;\n z-index: 1;\n position: absolute;\n\n / Scrollbar styling /\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--stzh-color-primary40);\n }\n\n &::-webkit-scrollbar-track {\n background: var(--content-background);\n }\n\n scrollbar-color: var(--stzh-color-primary40) var(--content-background);\n\n &--fixed {\n position: fixed;\n top: 0;\n height: auto;\n }\n\n &__heading {\n margin: 0;\n position: sticky;\n top: 0;\n }\n\n &__backdrop {\n position: absolute;\n z-index: -1;\n top: 0;\n width: 0;\n height: 0;\n background-color: $colorBlack40op;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &--visible {\n width: 100vw;\n height: 100vh;\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n &__button {\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n padding-left: space(\"none\");\n padding-right: space(\"medium\");\n\n padding-top: space(\"none\");\n padding-bottom: space(\"none\");\n\n width: 100%;\n min-height: space(\"xbig\");\n appearance: none;\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xsmall);\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border: none;\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n cursor: pointer;\n @include mq(\"medium\") {\n padding-right: space(\"small\");\n }\n @include mq($from: large) {\n @include fontSize(\"deci\");\n @include fontSize(\"deci\");\n }\n @include mq($from: ultra) {\n padding-left: calc(((100vw - #{map-get($breakpoints, \"ultra\")})) / 2);\n padding-right: space(\"medium\");\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button-spacer {\n visibility: hidden;\n pointer-events: none;\n }\n\n &__subheading {\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n @include fontSize(\"centi\");\n @include font(\"heavy\");\n margin: 0;\n padding: space(\"small\") space(\"medium\");\n hyphens: auto;\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n\n @include mq($from: large) {\n @include fontSize(\"deci\");\n }\n\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n );\n padding-right: space(\"medium\");\n }\n }\n\n &__content-inner {\n background-color: var(--content-background);\n overflow-y: hidden;\n }\n\n &__button-text {\n flex-grow: 1;\n padding-left: space(\"medium\");\n\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-left: space(\"medium\");\n padding-right: space(\"medium\");\n }\n }\n\n &__button-icon,\n &__button-icon-in-menu {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: 500ms;\n color: var(--trigger-color);\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &__button-icon-in-menu {\n --size: var(--icon-size);\n color: var(--stzh-color-black);\n margin-left: auto;\n\n &:hover {\n color: var(--stzh-color-primary70);\n }\n @include mq(\"medium\") {\n display: none;\n }\n }\n &__sub-menu {\n display: flex;\n padding-right: space(\"medium\");\n align-items: center;\n\n @include mq($from: medium) {\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-right: space(\"medium\");\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n color: var(--hover-trigger-color);\n }\n\n &__content {\n height: calc(100vh - 64px);\n width: 100%;\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n stzh-details {\n .stzh-details--is-open {\n .stzh-pi-menu__button-icon-in-menu {\n transform: rotate(180deg);\n }\n }\n .stzh-details__content-inner {\n padding-top: space(\"none\");\n }\n }\n / Nav /\n\n &__nav {\n padding-bottom: var(--stzh-space-xlarge);\n padding-left: space(\"none\");\n }\n\n &__nav-list {\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n\n &__nav-list.is-level-2 {\n @include mq($from: medium) {\n padding-bottom: space(\"small\");\n }\n }\n\n &__nav-item {\n display: block;\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-right\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n @include spaceCurve(\"padding-top\", \"tiny\");\n @include spaceCurve(\"padding-right\", \"regular\");\n @include spaceCurve(\"padding-bottom\", \"tiny\");\n padding-left: var(--padding-left);\n text-decoration: none;\n color: var(--stzh-color-black);\n\n &:hover {\n color: var(--stzh-color-primary70);\n }\n }\n\n &__nav-item.active {\n background-color: var(--stzh-color-primary30);\n }\n\n &__nav-item.is-level-1 {\n @include font(\"heavy\");\n\n padding: space(\"small\") space(\"medium\");\n @include mq($to: medium) {\n height: 44px;\n align-content: center;\n }\n @include mq($from: medium) {\n padding-left: space(\"small\");\n padding-right: space(\"small\");\n }\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"medium\")\n );\n padding-right: space(\"medium\");\n }\n }\n\n &__nav-item.is-level-2 {\n line-height: space(\"xlarge\");\n padding: space(\"xsmall\") space(\"xxlarge\");\n\n @include mq($from: medium) {\n padding-left: space(\"xlarge\");\n padding-right: space(\"xlarge\");\n }\n @include mq($from: ultra) {\n padding-left: calc(\n (((100vw - #{map-get($breakpoints, \"ultra\")})) / 2) + space(\"xxlarge\")\n );\n padding-right: space(\"xxlarge\");\n }\n }\n\n &__button-space-helper {\n visibility: hidden;\n pointer-events: none;\n }\n\n / Open /\n\n &--is-open {\n .stzh-pi-menu__button-icon {\n transform: rotate(180deg);\n }\n\n .stzh-pi-menu__content-inner {\n overflow-y: auto;\n height: calc(100vh - 64px);\n\n // @include mq($from: small) {\n // height: calc(100vh - 72px);\n // }\n\n // @include mq($from: medium) {\n // height: calc(100vh - 80px);\n // }\n\n // @include mq($from: medium) {\n // height: calc(100vh - 96px);\n // }\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhPiMenuClosedEvent,\n StzhPiMenuCloseEvent,\n StzhPiMenuItemClickEvent,\n StzhPiMenuOpenedEvent,\n StzhPiMenuOpenEvent,\n StzhPiPagetitleMenuItem,\n} from \"../../../index\";\n\nimport { waitForEvent } from \"../../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../../utils/animation-utils\";\nimport { StzhPiMenuLocalization } from \"./stzh-pi-menu.localization\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../../utils/media-utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"100%\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"100%\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n// const CLASS_BODY_OPEN = \"stzh-header-open\";\n\n@Component({\n tag: \"stzh-pi-menu\",\n styleUrl: \"stzh-pi-menu.scss\",\n shadow: true,\n})\nexport class StzhPiMenu {\n /* Translation strings /\n @Prop() localization: StzhPiMenuLocalization;\n\n /* Menu navigation items /\n @Prop() menuItems: StzhPiPagetitleMenuItem[] \| string = [];\n private _menuItems: StzhPiPagetitleMenuItem[];\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Heading title /\n @Prop() subheading: string = \"\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\n\n /* If the menu is fixed (when otherwise no longer in viewport) or statically positioned. /\n @State() menuIsFixed: boolean = false;\n\n /* Used to sync width of stzh-pi-menu-positioner (in-flow element) with stzh-pi-menu (gets taken out of flow with menuIsFixed, but must stay the same width) /\n @State() entangledMenuSize: number = 20;\n\n @State() showBackdrop: boolean = false;\n\n /* Break points for displays /\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n @State() isLarge: boolean;\n @State() isUltra: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhPiMenuElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhPiMenuOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhPiMenuOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhPiMenuCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhPiMenuClosedEvent>;\n\n /* Metanav item click event /\n @Event() stzhMenuItemClick: EventEmitter<StzhPiMenuItemClickEvent>;\n\n @Watch(\"menuItems\")\n menuItemsWatcher(newValue: StzhPiPagetitleMenuItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._menuItems = JSON.parse(newValue);\n } else {\n this._menuItems = newValue;\n }\n\n this._menuItems = this._menuItems.map((menuItem, index) => ({\n id: `submenu-${index}`,\n ...menuItem,\n }));\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-pi-menu\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n // this.bodyElement.style.height = `calc(100% - ${this.headingElement.clientHeight}px)`;\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-pi-menu\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-pi-menu\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-pi-menu\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show piMenu item content /\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n // this.menuIsFixed && document.body.classList.add(CLASS_BODY_OPEN);\n if (!this.isMedium && !this.isLarge && !this.isUltra) {\n this.showBackdrop = true;\n }\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide content /\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n // document.body.classList.remove(CLASS_BODY_OPEN);\n this.showBackdrop = false;\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle piMenu item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @State() rootTabindex: number = 0;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n private buttonElement: HTMLButtonElement;\n private piMenuId: string;\n private focusedByInput: boolean = false;\n\n private handleHeaderClick = () => {\n this.toggle();\n };\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.buttonElement.focus();\n }\n\n this.focusedByInput = false;\n };\n\n private handleMenuItemClick = (event: MouseEvent) => {\n this.stzhMenuItemClick.emit({\n component: \"stzh-pi-menu\",\n originalEvent: event,\n });\n };\n\n private handleBackdropClick = async () => {\n this.showBackdrop = false;\n this.hide();\n };\n\n private setEntangledMenuSize = () => {\n const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n this.entangledMenuSize = menuEl.getBoundingClientRect().width;\n };\n\n private menuObserver: IntersectionObserver;\n private resizeTimeout: number;\n\n private handleMenuIntersection = (entries: IntersectionObserverEntry[]) => {\n entries.forEach(entry => {\n if (entry.intersectionRatio < 1 && entry.boundingClientRect.top < 20) {\n this.menuIsFixed = true;\n } else {\n this.menuIsFixed = false;\n }\n });\n };\n\n private setSubMenuHeader(item) {\n return (\n <div class=\"stzh-pi-menu__sub-menu\">\n <a\n href={item.href}\n onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n class={{\n \"stzh-pi-menu__nav-item\": true,\n \"is-level-1\": true,\n active: item.active,\n }}\n >\n {item.label}\n </a>{\" \"}\n {item.items?.length ? <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon-in-menu\"></stzh-icon> : \"\"}\n </div>\n );\n }\n private setSubMenuItems(item) {\n if (!item.items?.length) return null;\n return (\n <ul id={item.id} class=\"stzh-pi-menu__nav-list is-level-2\">\n {item.items.map(item => (\n <li class=\"stzh-pi-menu__nav-list-item\">\n <a\n href={item.href}\n onClick={(e: MouseEvent) => this.handleMenuItemClick(e)}\n class={{\n \"stzh-pi-menu__nav-item\": true,\n \"is-level-2\": true,\n active: item.active,\n }}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n );\n }\n\n private mediaChangeHandler = () => {\n // update a state for example to update component template depending on breakpoint state\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n this.isLarge = media(\"large\").matches;\n this.isUltra = media(\"ultra\").matches;\n if (this.isMedium \|\| this.isLarge \|\| this.isUltra) {\n this.showBackdrop = false;\n this.open = true;\n } else {\n if (this.open) {\n this.showBackdrop = true;\n }\n }\n };\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n }\n\n async componentWillLoad() {\n this.piMenuId = `stzh-pi-menu-${accordionItemCounter++}`;\n this.menuItemsWatcher(this.menuItems);\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pi-pagetitle\");\n }\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n\n this.menuObserver = new IntersectionObserver(this.handleMenuIntersection, { rootMargin: \"0px\", threshold: 1 });\n const menuEl = this.element.shadowRoot.querySelector(\".stzh-pi-menu-positioner\");\n this.menuObserver.observe(menuEl);\n this.setEntangledMenuSize();\n this.mediaChangeHandler();\n\n // Open status for medium, large and ultra screens\n if (this.isMedium \|\| this.isLarge \|\| this.isUltra) {\n this.open = true;\n } else {\n this.open = false;\n }\n\n window.addEventListener(\n \"resize\",\n () => {\n if (this.resizeTimeout) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n this.resizeTimeout = window.requestAnimationFrame(() => {\n this.setEntangledMenuSize();\n });\n },\n false,\n );\n }\n\n disconnectedCallback() {\n if (this.menuObserver) {\n this.menuObserver.disconnect();\n }\n window.removeEventListener(\"resize\", () => {\n if (this.resizeTimeout) {\n window.cancelAnimationFrame(this.resizeTimeout);\n }\n });\n removeMediaChangeListener(this.mediaChangeHandler);\n }\n\n render() {\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-pi-menu\": true,\n \"stzh-pi-menu--is-open\": this.open,\n \"stzh-pi-menu--fixed\": this.menuIsFixed,\n };\n\n const backdropClasses = {\n \"stzh-pi-menu__backdrop\": true,\n \"stzh-pi-menu__backdrop--visible\": this.showBackdrop,\n };\n\n const closed = \"8.0625rem\";\n\n // Screens micro and small\n const narrowScreens = \"19.6875rem\";\n\n // Screens medium, large and ultra\n const wideScreens = `${this.entangledMenuSize}px`;\n\n const menuWidth = this.open ? (this.isMedium ? wideScreens : narrowScreens) : this.isMedium ? wideScreens : closed;\n\n return (\n <Host tabindex={this.rootTabindex} onFocus={this.onRootFocus}>\n <div class=\"stzh-pi-menu-positioner\">\n <div class={classes} style={{ width: menuWidth }}>\n <div class={backdropClasses} onClick={this.handleBackdropClick}></div>\n\n {/ Header of the menu /}\n <Heading class=\"stzh-pi-menu__heading\" onClick={this.handleHeaderClick}>\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-pi-menu__button\"\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span class=\"stzh-pi-menu__button-text\">{this.heading}</span>\n <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n </button>\n </Heading>\n\n {/ Content of the menu */}\n <div\n id={`${this.piMenuId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-pi-menu__content\"\n aria-labelledby={`${this.piMenuId}-header`}\n role=\"region\"\n >\n <div class=\"stzh-pi-menu__content-inner\">\n <nav class=\"stzh-pi-menu__nav\" aria-label={this.localization.menuLabel}>\n {this.subheading && <p class=\"stzh-pi-menu__subheading\">{this.subheading}</p>}\n <ul class=\"stzh-pi-menu__nav-list is-level-1\">\n {this._menuItems.map((item, index) => (\n <li class=\"stzh-pi-menu__nav-list-item\">\n {this.isMedium \|\| this.isLarge \|\| this.isUltra ? (\n <div>\n {this.setSubMenuHeader(item)}\n {this.setSubMenuItems(item)}\n </div>\n ) : (\n <stzh-details open={index === 0}>\n {this.setSubMenuHeader(item)}\n <div slot=\"content\">{this.setSubMenuItems(item)}</div>\n </stzh-details>\n )}\n </li>\n ))}\n </ul>\n </nav>\n </div>\n </div>\n </div>\n <button class=\"stzh-pi-menu__button stzh-pi-menu__button-space-helper\" aria-hidden=\"true\" type=\"button\">\n <span class=\"stzh-pi-menu__button-text\">\n <span class=\"stzh-pi-menu__heading-text\">{this.heading}</span>\n </span>\n <stzh-icon name=\"angle-down\" class=\"stzh-pi-menu__button-icon\"></stzh-icon>\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-pi-pagetitle.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-289f5de2.js';
 import { d as defineCustomElement$2 } from './p-955f381a.js';
-const stzhPiPagetitleCss = ".sc-stzh-pi-pagetitle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-pagetitle-h,[stzh-hidden].sc-stzh-pi-pagetitle-h{display:none}.sc-stzh-pi-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::before,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-pagetitle-h .has-focus.sc-stzh-pi-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle{outline-style:none !important}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pi-pagetitle-h{--hero-background-color:var(\n    --stzh-pi-pagetitle-hero-background-color,\n    var(--stzh-color-primary10)\n  );--lead-background-color:var(\n    --stzh-pi-pagetitle-lead-background-color,\n    var(--stzh-color-primary40)\n  );--background-color:var(\n    --stzh-pi-pagetitle-background-color,\n    var(--stzh-color-coolgrey10)\n  );--grid-template-areas:\"hero hero hero hero\"\n    \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}@media screen and (min-width: 600px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 900px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero hero hero hero .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 1600px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero hero . . .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=dateline],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=dateline]{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);--color:var(--stzh-color-black80op)}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=heading],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=heading],.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=lead] *,.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=lead] *,.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=breadcrumb],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=breadcrumb]{--color:var(--stzh-color-black)}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:1.25rem}@media screen and (min-width: 600px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:2rem}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:4rem}}@media screen and (min-width: 1600px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color);padding-top:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:1.25rem;padding-right:1.25rem}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 900px) and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"lead lead lead lead\";background-color:var(--lead-background-color);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . . lead lead lead lead lead lead . . .\"}}.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-area:image-lead-menu;column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"image image image image\" \"lead lead lead lead\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . image image image image image image\" \"lead lead lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\"}}.stzh-pi-pagetitle__hero.sc-stzh-pi-pagetitle{grid-area:hero}.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{display:none;grid-column:1/2;grid-row:1/2;position:relative;z-index:2}@media screen and (min-width: 900px){.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{grid-column:1/3;grid-row:1/2}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{grid-column:1/3;grid-row:1/2}}.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{grid-column:1/-1;grid-row:1/2;z-index:1}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-2.5rem;grid-column:3/-1;grid-row:1/2}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color);grid-column:1/-1;grid-row:2/4;z-index:1;background-color:var(--lead-background-color);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{grid-column:3/-1;grid-row:2/-1}}.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{flex-direction:row}}.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxsmall)}.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__menu-inner.sc-stzh-pi-pagetitle{position:absolute;top:0;right:0;bottom:0;left:0}}.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xxlarge);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"article-info article-info article-info article-info\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . article-info article-info article-info article-info article-info article-info\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . article-info article-info article-info article-info article-info article-info article-info article-info article-info article-info\"}}.stzh-pi-pagetitle__article-info.sc-stzh-pi-pagetitle{grid-area:article-info}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{margin-top:0;margin-bottom:var(--stzh-space-xxsmall);color:var(--stzh-color-coolgrey70);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{margin:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:auto repeat(3, minmax(0, 1fr))}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{background-color:transparent}@media screen and (max-width: 899px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{background-color:var(--lead-background-color)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{position:relative;display:inherit;margin-right:calc(var(--stzh-grid-gutter) * -1)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-small) * -1)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-medium) * -1);margin-left:-2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-large) * -1);margin-left:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-ultra) * -1);margin-left:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle--level-3.sc-stzh-pi-pagetitle,.stzh-pi-pagetitle--level-4.sc-stzh-pi-pagetitle{--hero-background-color:var(--stzh-color-coolgrey20);--lead-background-color:var(--stzh-color-coolgrey30)}.stzh-pi-pagetitle--hyphens.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{hyphens:auto}";
+const stzhPiPagetitleCss = ".sc-stzh-pi-pagetitle-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-pagetitle-h,[stzh-hidden].sc-stzh-pi-pagetitle-h{display:none}.sc-stzh-pi-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::before,.sc-stzh-pi-pagetitle-h *.sc-stzh-pi-pagetitle::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-pagetitle-h .has-focus.sc-stzh-pi-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle{outline-style:none !important}.sc-stzh-pi-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pi-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pi-pagetitle-h{--hero-background-color:var(\n    --stzh-pi-pagetitle-hero-background-color,\n    var(--stzh-color-primary10)\n  );--lead-background-color:var(\n    --stzh-pi-pagetitle-lead-background-color,\n    var(--stzh-color-primary40)\n  );--background-color:var(\n    --stzh-pi-pagetitle-background-color,\n    var(--stzh-color-coolgrey10)\n  );--grid-template-areas:\"hero hero hero hero\"\n    \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}@media screen and (min-width: 600px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 900px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero hero hero hero .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}@media screen and (min-width: 1600px){.sc-stzh-pi-pagetitle-h{--grid-template-areas:\". . hero hero hero hero hero hero hero . . .\"\n      \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\"}}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=dateline],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=dateline]{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);--color:var(--stzh-color-black80op)}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=heading],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=heading],.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=lead] *,.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=lead] *,.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=breadcrumb],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=breadcrumb]{--color:var(--stzh-color-black)}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:1.25rem}@media screen and (min-width: 600px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:2rem}}@media screen and (min-width: 1260px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:4rem}}@media screen and (min-width: 1600px){.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=menu],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=menu]{--stzh-pi-menu-padding-left:calc((100vw - 84.25rem) / 2)}}.sc-stzh-pi-pagetitle-h.sc-stzh-pi-pagetitle-s>[slot=content],.sc-stzh-pi-pagetitle-h .sc-stzh-pi-pagetitle-s>[slot=content]{--stzh-cardlist-pi-content:1}.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color);padding-top:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__hero-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);background-color:var(--hero-background-color)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:1.25rem;padding-right:1.25rem}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 900px) and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"lead lead lead lead\";background-color:var(--lead-background-color);padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead-container.sc-stzh-pi-pagetitle{grid-template-areas:\". . . lead lead lead lead lead lead . . .\"}}.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-area:image-lead-menu;column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"image image image image\" \"lead lead lead lead\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . image image image image image image\" \"lead lead lead lead lead lead lead lead\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-areas:\". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\"}}.stzh-pi-pagetitle__hero.sc-stzh-pi-pagetitle{grid-area:hero}.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{display:none;grid-column:1/2;grid-row:1/2;position:relative;z-index:2}@media screen and (min-width: 900px){.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{grid-column:1/3;grid-row:1/2}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{grid-column:1/3;grid-row:1/2}}.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{grid-column:1/-1;grid-row:1/2;z-index:1}@media screen and (min-width: 900px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-2.5rem;grid-column:3/-1;grid-row:1/2}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__image.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color);grid-column:1/-1;grid-row:2/4;z-index:1;background-color:var(--lead-background-color);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{grid-column:3/-1;grid-row:2/-1}}.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__meta.sc-stzh-pi-pagetitle{flex-direction:row}}.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pi-pagetitle__readspeaker.sc-stzh-pi-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pi-pagetitle__dateline.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxsmall)}.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__breadcrumbs.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__menu-inner.sc-stzh-pi-pagetitle{position:absolute;top:0;right:0;bottom:0;left:0}}.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-xxlarge);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:\"article-info article-info article-info article-info\"}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . article-info article-info article-info article-info article-info article-info\"}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle__article-info-wrapper.sc-stzh-pi-pagetitle{grid-template-areas:\". . article-info article-info article-info article-info article-info article-info article-info article-info article-info article-info\"}}.stzh-pi-pagetitle__article-info.sc-stzh-pi-pagetitle{grid-area:article-info}@media screen and (min-width: 900px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pi-pagetitle__article-info-holder.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{margin-top:0;margin-bottom:var(--stzh-space-xxsmall);color:var(--stzh-color-coolgrey70);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__author.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{margin:0;font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-pi-pagetitle__date.sc-stzh-pi-pagetitle{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:auto repeat(3, minmax(0, 1fr))}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu.sc-stzh-pi-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{background-color:transparent}@media screen and (max-width: 899px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__image-lead-menu-container.sc-stzh-pi-pagetitle{background-color:var(--lead-background-color)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{position:relative;display:inherit;margin-right:calc(var(--stzh-grid-gutter) * -1)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-small) * -1)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-medium) * -1);margin-left:-2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-large) * -1);margin-left:-4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__menu.sc-stzh-pi-pagetitle{margin-right:calc(var(--stzh-grid-gutter-ultra) * -1);margin-left:calc((100vw - 84.25rem) / -2)}}.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:-4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-pi-pagetitle--has-menu.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__lead.sc-stzh-pi-pagetitle{margin-right:calc((100vw - 84.25rem) / -2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-pagetitle--has-meta.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__text.sc-stzh-pi-pagetitle{padding-top:var(--stzh-space-xxlarge)}}.stzh-pi-pagetitle--level-3.sc-stzh-pi-pagetitle,.stzh-pi-pagetitle--level-4.sc-stzh-pi-pagetitle{--hero-background-color:var(--stzh-color-coolgrey20);--lead-background-color:var(--stzh-color-coolgrey30)}.stzh-pi-pagetitle--hyphens.sc-stzh-pi-pagetitle .stzh-pi-pagetitle__heading.sc-stzh-pi-pagetitle{hyphens:auto}";
 const StzhPiPagetitleStyle0 = stzhPiPagetitleCss;
 const StzhPiPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiPagetitle extends H {
@@ -60,7 +60,7 @@ const StzhPiPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class StzhPiPagetitle
             "stzh-pi-pagetitle--hyphens": this.hyphensEnabled,
             [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,
         };
-        return (h(Host, { key: '560692c5c1a0bc4b85909c2c38a35c50fd65a78e', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: 'df414172d0f8fcb1be1c0ee6ad30dc0365cc0cf9', class: classes }, h("div", { key: '89d34c1b8c636636cfabc08504c87e533366c047', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: '1e130d13a2f8feb012d54d8cd6c684cd8bd92fc7', class: "stzh-pi-pagetitle__hero" }, h("div", { key: '1fc198360cc5d98854e15927e01a08c5bf1abce7', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: '93374c191a62689c544d2f8abfe434abd8dcc9a7', name: "breadcrumb" })), h("div", { key: '0449d333156c61f0535a826a6142fee7a178760a', class: "stzh-pi-pagetitle__meta" }, h("div", { key: '956437e4b745cfc0aa6476478b59378a1a77a46f', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: 'db38617c49b123ac8c819f5693d631a5b1901c69', name: "readspeaker" }))), h("div", { key: '84bfd898ea712c3df1a3da4ddd21f6b8928bad53', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: '3a88edf7493d2f53f420441b51fb77f5c97aa176', name: "dateline" })), h("div", { key: '5d0b6de1e1c4a6b69b05c1d4363b228336f0b132', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: '9df75bb73bf52b65fdacb62edbd33f3a3d93f0e4', name: "heading" })))), h("div", { key: 'cd849f2c19cb4868cb07eee1b1d0b3fbf63802b4', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: 'bbb3d20db0a19b8c231785d3585fa23618b5dbad', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: '65c4291c46e802bf39c41f883b568d2cb37e522d', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: '2b9aefbbc7a6adda6b3e2950e8c37cbe6580453a', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: '55dcc534ebaded73d2ae56c34a1ec841fe9917b5', name: "menu" })))), imageSlotUsed && (h("div", { key: '787e21099d69b38320cedf3b18df9e76a948c17c', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: '206ce7f95a42d1aa565571f44064761a46fe521c', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '09ed215ffdd9b42101304a5de7270d2d21e2a83e', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: '724525ce88dd60420388179f848e72af3dd1cd1b', name: "image" })))))), menuSlotUsed && (h("div", { key: '6058aa124b21855638be02010ba05cb047685ae8', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: '010e77b49cf70cfd0a11e6a94fe72c9845d3a5e7', name: "lead" }))))), !menuSlotUsed && (h("div", { key: 'e65773650c6be32f823f0bf56b739f2e88334706', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: 'c17ab33d7c047e1f4a22614f0595eed20bb9c2f0', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: 'c643e9a464f4cece03d95ae8758d2d8c15683e43', name: "lead" })))), h("div", { key: '074f868ca141ca9c6aa51a7a97b731ea70ec51ec', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: 'b8cc5b097bf5ccf758cda4c4afb964ec1aa9d4a0', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: 'd0ba8e41e1332806f143d42991e3e06530f738f7', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (h("div", { key: 'e3f9087a56b10a64e5056cb25d0e5688280c8aed' }, this.author && h("p", { key: '851f6964e45b316d98012c638720b5fc02d6eb73', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: 'afc79a7ffaadcd46d1e0e8b5aee120b370debeab', class: "stzh-pi-pagetitle__date" }, this.date))), h("slot", { key: 'd372b9b51fc92fec1137f2f25f46312fc4b49a38', name: "content" })))))));
+        return (h(Host, { key: '804a4efc2fa0cfe72dc06c15cef351e976fc41d7', "has-menu": menuSlotUsed, "has-article-info": hasArticleInfo }, h("div", { key: 'c7676dba441053c2e39386316afbfa859367b72d', class: classes }, h("div", { key: 'e60a57bcc4958611afda278d8b87e3b27b32177b', class: "stzh-pi-pagetitle__hero-container" }, h("div", { key: '30d5ba4fb239bcfe2b063845469688bffe2fea07', class: "stzh-pi-pagetitle__hero" }, h("div", { key: '2acebd4bf60ad119e6ace906844a1dea14cfd1a1', class: "stzh-pi-pagetitle__breadcrumbs" }, h("slot", { key: '77c21fc003437d110d6a1980600bdd544110a2e9', name: "breadcrumb" })), h("div", { key: 'be3222a52e66bfa0feb6297d6e4cb5be8d2c86ad', class: "stzh-pi-pagetitle__meta" }, h("div", { key: '979225e6182bcd67743e4b719131ed141cd70486', class: "stzh-pi-pagetitle__readspeaker" }, h("slot", { key: '6129f705d89f32b4a55d18a3f3b921b1c6735347', name: "readspeaker" }))), h("div", { key: 'f073c73e9ca45b3f425937e2018a8e68a675c8df', class: "stzh-pi-pagetitle__dateline" }, h("slot", { key: '7ac38869bba88c421da523fe69100603f2bbb183', name: "dateline" })), h("div", { key: 'b53560280e515aa4d3622f9f2ef17208a8ef20bd', class: "stzh-pi-pagetitle__heading" }, h("slot", { key: 'fea90a8e173eebdf699c0f57285cf3497e174735', name: "heading" })))), h("div", { key: '2d3bb0353eca8b4371779742441a28b7ac2bda5f', class: "stzh-pi-pagetitle__image-lead-menu-container" }, h("div", { key: 'ed6bc81ef43f341ba11d9e6caca8d509fbd4671e', class: "stzh-pi-pagetitle__image-lead-menu" }, h("div", { key: 'ceecdeffec67126392b33266f9a2e1ece3b2040f', class: "stzh-pi-pagetitle__menu" }, menuSlotUsed && (h("div", { key: 'fba62ef0cc97ea8926eb904e5ad79965ce1325c0', class: "stzh-pi-pagetitle__menu-inner" }, h("slot", { key: '54abbb9115babd2f0d3fd54824413f5250c0a896', name: "menu" })))), imageSlotUsed && (h("div", { key: '7399aeb9c0ae844ef81fc03192c3901b2e152c2c', class: "stzh-pi-pagetitle__image" }, [1, 2].indexOf(this.level) > -1 && (h("div", { key: '926f0d5c2523e9ca0753f526f4df2076ed7e0331', class: "stzh-pi-pagetitle__image-wrapper" }, h("stzh-ratio", { key: '236f2052bf4f2b6baec0a79ab780dbbf361ee634', ratio: "16:9", ratioSmall: "21:9", class: "stzh-pi-pagetitle__ratio" }, h("slot", { key: 'd1d27f157eef7fe98a5f7e6cb7de16d31519d397', name: "image" })))))), menuSlotUsed && (h("div", { key: '06865f44ee1dd07904aa8d0555a86fcee6ee0c58', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: 'badd32758195b468dd641ff4cce3d38cdbdb98f2', name: "lead" }))))), !menuSlotUsed && (h("div", { key: 'f07cbc8824dc2aa6a1f8b977ba766894eaa8b49f', class: "stzh-pi-pagetitle__lead-container" }, h("div", { key: '3e30a4ce643a1eb53e08b8f6e67e78566824f6ce', class: "stzh-pi-pagetitle__lead" }, h("slot", { key: 'f86b1fcb31937d096a92c93f1b591aba559ed26f', name: "lead" })))), h("div", { key: '49be971b2748631c370c2ca2db71286c57a8f7b7', class: "stzh-pi-pagetitle__article-info-wrapper" }, h("div", { key: '61fc35a35582a4f8524bff4d617f52bd39c797e5', class: "stzh-pi-pagetitle__article-info" }, h("div", { key: '2011f7a43431521f5339f6217957006fcb02dca2', class: "stzh-pi-pagetitle__article-info-holder" }, hasArticleInfo && (h("div", { key: '68ab3f8fcdfe143ffe4e99683207723cb315df4a' }, this.author && h("p", { key: '70ecb540df84f877cab6c33c752d06d785ba8abe', class: "stzh-pi-pagetitle__author" }, this.author), this.date && h("p", { key: 'e052e5f011c57333314dd3d4287f8f6cc05d15d4', class: "stzh-pi-pagetitle__date" }, this.date))), h("slot", { key: '8f51584e518ba3464f6bf8c41cb6a64aad1feece', name: "content" })))))));
     }
     get element() { return this; }
     static get style() { return StzhPiPagetitleStyle0; }