@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

package/dist/components/stzh-langnav.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$3 } from './stzh-icon2.js';
+import { d as defineCustomElement$2 } from './stzh-popover2.js';
+
+const stzhLangnavCss = ".sc-stzh-langnav-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-langnav-h{display:none}.sc-stzh-langnav-h *.sc-stzh-langnav,.sc-stzh-langnav-h *.sc-stzh-langnav::before,.sc-stzh-langnav-h *.sc-stzh-langnav::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-langnav-h{--dropdown-color:var(--stzh-color-grey61)}.stzh-langnav__dropdown.sc-stzh-langnav{--color:var(--dropdown-color)}";
+
+const StzhLangnav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhChange = createEvent(this, "stzhChange", 7);
+    this.handleChange = (event) => {
+      this.stzhChange.emit({
+        component: "stzh-langnav",
+        value: event.detail.value
+      });
+      if (!this.preventUrlchange) {
+        window.location.href = event.detail.value;
+      }
+    };
+    this.languageActive = undefined;
+    this.languages = undefined;
+    this.popoverPlacement = "bottom";
+    this.preventUrlchange = false;
+  }
+  render() {
+    const classes = {
+      "stzh-langnav": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-dropdown", { class: "stzh-langnav__dropdown", "no-search": true, icon: "world-globe", size: "small", variant: "plain", popoverPlacement: this.popoverPlacement, items: this.languageActive ? [this.languageActive] : null, options: this.languages, onStzhChange: this.handleChange }))));
+  }
+  get element() { return this; }
+  static get style() { return stzhLangnavCss; }
+}, [2, "stzh-langnav", {
+    "languageActive": [1, "language-active"],
+    "languages": [1],
+    "popoverPlacement": [513, "popover-placement"],
+    "preventUrlchange": [4, "prevent-urlchange"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-langnav", "stzh-dropdown", "stzh-icon", "stzh-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-langnav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhLangnav$1);
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhLangnav = StzhLangnav$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhLangnav, defineCustomElement };

package/dist/components/stzh-link2.js

@@ -39,7 +39,9 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.iconPosition = "left";
     this.size = "default";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
+    this.download = undefined;
     this.type = "button";
     this.variant = "default";
     this.fullwidth = false;
@@ -53,6 +55,10 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.iconOnly = false;
     this.label = "";
     this.linkAccesskey = undefined;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -88,9 +94,11 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+            ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   get element() { return this; }
   static get style() { return stzhLinkCss; }
@@ -99,7 +107,9 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "iconPosition": [513, "icon-position"],
     "size": [513],
     "href": [1],
+    "rel": [1],
     "target": [1],
+    "download": [1],
     "type": [1],
     "variant": [513],
     "fullwidth": [516],
@@ -113,6 +123,10 @@ const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "iconOnly": [516, "icon-only"],
     "label": [1],
     "linkAccesskey": [1, "link-accesskey"],
+    "a11yLabel": [1, "a11y-label"],
+    "a11yDescribedby": [1, "a11y-describedby"],
+    "a11yExpanded": [516, "a11y-expanded"],
+    "a11yControls": [1, "a11y-controls"],
     "setFocus": [64]
   }]);
 function defineCustomElement() {

package/dist/components/stzh-microsite-teaserlist.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhMicrositeTeaserlist extends Components.StzhMicrositeTeaserlist, HTMLElement {}
+export const StzhMicrositeTeaserlist: {
+  prototype: StzhMicrositeTeaserlist;
+  new (): StzhMicrositeTeaserlist;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-microsite-teaserlist.js

@@ -0,0 +1,212 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as axios } from './index3.js';
+import { f as fetchTranslations } from './translation-utils.js';
+import { d as defineCustomElement$h } from './stzh-actionset2.js';
+import { d as defineCustomElement$g } from './stzh-badge2.js';
+import { d as defineCustomElement$f } from './stzh-button2.js';
+import { d as defineCustomElement$e } from './stzh-card2.js';
+import { d as defineCustomElement$d } from './stzh-card-list2.js';
+import { d as defineCustomElement$c } from './stzh-chip2.js';
+import { d as defineCustomElement$b } from './stzh-chip-select2.js';
+import { d as defineCustomElement$a } from './stzh-clamp2.js';
+import { d as defineCustomElement$9 } from './stzh-dropdown2.js';
+import { d as defineCustomElement$8 } from './stzh-icon2.js';
+import { d as defineCustomElement$7 } from './stzh-link2.js';
+import { d as defineCustomElement$6 } from './stzh-menu2.js';
+import { d as defineCustomElement$5 } from './stzh-menu-item2.js';
+import { d as defineCustomElement$4 } from './stzh-popover2.js';
+import { d as defineCustomElement$3 } from './stzh-sortable2.js';
+import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
+
+const stzhMicrositeTeaserlistCss = ".sc-stzh-microsite-teaserlist-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-microsite-teaserlist-h{display:none}.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::before,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxxlarge)}}";
+
+const StzhMicrositeTeaserlist$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._tags = [];
+    this._tagChips = [];
+    this.items = [];
+    this.filteredItems = [];
+    this.filteredSlicedItems = [];
+    this.handleChange = (event) => {
+      this.showItems = this.stepItems;
+      this.activeFilter = event.detail.value;
+    };
+    this.handleMoreClick = () => {
+      this.showItems += this.stepItems;
+    };
+    this.localization = undefined;
+    this.api = undefined;
+    this.tags = [];
+    this.stepItems = 6;
+    this.showItems = undefined;
+    this.activeFilter = "";
+  }
+  async filterHandler() {
+    this.filteredItems = this.items
+      .filter((item) => {
+      // return (this.activeFilter[0] !== "") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;
+      return (this.activeFilter !== "") ? item.tags.some(tag => this.activeFilter === tag) : true;
+    });
+    this.filteredSlicedItems = this.filteredItems
+      .slice(0, this.showItems);
+  }
+  async tagsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._tags = JSON.parse(newValue);
+    }
+    else {
+      this._tags = newValue;
+    }
+    this._tagChips = this._tags.map((tag) => ({
+      "label": tag.name,
+      "value": tag.id,
+      "variant": "filter",
+      "type": "secondary",
+      "counter": ((tag.id)
+        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length
+        : this.items.length).toString()
+    }));
+  }
+  async apiWatcher(newValue) {
+    if (!newValue) {
+      return;
+    }
+    let apiUrl = this.api.replace(/\{lang\}/, this.localization.$locale);
+    // load data from API
+    const { data } = await axios.get(apiUrl);
+    this.items = data.items;
+    this.showItems = this.stepItems;
+    this.tagsWatcher(this.tags);
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "microsite-teaserlist");
+    }
+    await this.apiWatcher(this.api);
+  }
+  render() {
+    const classes = {
+      "stzh-microsite-teaserlist": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true }, item.image &&
+      h("img", { slot: "image", src: item.image }), item.title &&
+      h("stzh-clamp", { slot: "heading", lines: 2 }, item.title), item.description &&
+      h("stzh-clamp", { slot: "content", lines: 3 }, item.description)))), this.showItems < this.filteredItems.length &&
+      h("div", { class: "stzh-microsite-teaserlist__show-more" }, h("stzh-button", { variant: "secondary", label: this.localization.showMore, onClick: this.handleMoreClick })))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "showItems": ["filterHandler"],
+    "activeFilter": ["filterHandler"],
+    "tags": ["tagsWatcher"],
+    "api": ["apiWatcher"]
+  }; }
+  static get style() { return stzhMicrositeTeaserlistCss; }
+}, [2, "stzh-microsite-teaserlist", {
+    "localization": [16],
+    "api": [1],
+    "tags": [1],
+    "stepItems": [2, "step-items"],
+    "showItems": [32],
+    "activeFilter": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-microsite-teaserlist", "stzh-actionset", "stzh-badge", "stzh-button", "stzh-card", "stzh-card-list", "stzh-chip", "stzh-chip-select", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-link", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-sortable", "stzh-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-microsite-teaserlist":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhMicrositeTeaserlist$1);
+      }
+      break;
+    case "stzh-actionset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "stzh-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "stzh-card-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "stzh-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "stzh-chip-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "stzh-clamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "stzh-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "stzh-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "stzh-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "stzh-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "stzh-sortable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const StzhMicrositeTeaserlist = StzhMicrositeTeaserlist$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhMicrositeTeaserlist, defineCustomElement };

package/dist/components/stzh-pagebottom.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './stzh-icon2.js';
 import { d as defineCustomElement$3 } from './stzh-share2.js';
 import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
 
-const stzhPagebottomCss = ".sc-stzh-pagebottom-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagebottom-h{display:none}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagebottom-h .sc-stzh-pagebottom-s>[slot=logo]{height:2.375rem}.stzh-pagebottom.sc-stzh-pagebottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom{-ms-flex-direction:row;flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-pagebottom__logo.sc-stzh-pagebottom{margin-left:auto}}.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){display:block;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){margin-top:0;margin-left:var(--stzh-space-xlarge)}}.stzh-pagebottom--with-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xlarge);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-pagebottom--with-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagebottom--with-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxxlarge)}}";
+const stzhPagebottomCss = ".sc-stzh-pagebottom-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagebottom-h{display:none}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagebottom-h .sc-stzh-pagebottom-s>[slot=logo]{height:2.375rem}.stzh-pagebottom.sc-stzh-pagebottom{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom{-ms-flex-direction:row;flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-pagebottom__logo.sc-stzh-pagebottom{margin-left:auto}}.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){display:block;margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 600px){.stzh-pagebottom__logo-link.sc-stzh-pagebottom:not(:empty){margin-top:0;margin-left:var(--stzh-space-xlarge)}}.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xlarge);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagebottom--has-border.sc-stzh-pagebottom{padding-top:var(--stzh-space-xxxlarge)}}";
 
 const StzhPagebottom$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,7 +19,7 @@ const StzhPagebottom$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   render() {
     const classes = {
       "stzh-pagebottom": true,
-      "stzh-pagebottom--with-border": this.withBorder
+      "stzh-pagebottom--has-border": this.withBorder
     };
     return (h(Host, null, h("div", { class: classes }, !this.shareDisabled &&
       h("div", { class: "stzh-pagebottom__share-wrapper" }, this.shareTitle &&

package/dist/components/stzh-pagetitle-hero.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhPagetitleHero extends Components.StzhPagetitleHero, HTMLElement {}
+export const StzhPagetitleHero: {
+  prototype: StzhPagetitleHero;
+  new (): StzhPagetitleHero;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-pagetitle-hero.js

@@ -0,0 +1,116 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as setPropsIfNull, h as hasSlot } from './utils.js';
+import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './media-utils.js';
+
+/**
+ * fitty v2.3.6 - Snugly resizes text to fit its parent container
+ * Copyright (c) 2022 Rik Schennink <rik@pqina.nl> (https://pqina.nl/)
+ */
+
+var e=function(e){if(e){var t=function(e){return [].slice.call(e)},n=0,i=1,r=2,o=3,a=[],l=null,u="requestAnimationFrame"in e?function(){e.cancelAnimationFrame(l),l=e.requestAnimationFrame((function(){return s(a.filter((function(e){return e.dirty&&e.active})))}));}:function(){},c=function(e){return function(){a.forEach((function(t){return t.dirty=e})),u();}},s=function(e){e.filter((function(e){return !e.styleComputed})).forEach((function(e){e.styleComputed=m(e);})),e.filter(y).forEach(v);var t=e.filter(p);t.forEach(d),t.forEach((function(e){v(e),f(e);})),t.forEach(S);},f=function(e){return e.dirty=n},d=function(e){e.availableWidth=e.element.parentNode.clientWidth,e.currentWidth=e.element.scrollWidth,e.previousFontSize=e.currentFontSize,e.currentFontSize=Math.min(Math.max(e.minSize,e.availableWidth/e.currentWidth*e.previousFontSize),e.maxSize),e.whiteSpace=e.multiLine&&e.currentFontSize===e.minSize?"normal":"nowrap";},p=function(e){return e.dirty!==r||e.dirty===r&&e.element.parentNode.clientWidth!==e.availableWidth},m=function(t){var n=e.getComputedStyle(t.element,null);return t.currentFontSize=parseFloat(n.getPropertyValue("font-size")),t.display=n.getPropertyValue("display"),t.whiteSpace=n.getPropertyValue("white-space"),!0},y=function(e){var t=!1;return !e.preStyleTestCompleted&&(/inline-/.test(e.display)||(t=!0,e.display="inline-block"),"nowrap"!==e.whiteSpace&&(t=!0,e.whiteSpace="nowrap"),e.preStyleTestCompleted=!0,t)},v=function(e){e.element.style.whiteSpace=e.whiteSpace,e.element.style.display=e.display,e.element.style.fontSize=e.currentFontSize+"px";},S=function(e){e.element.dispatchEvent(new CustomEvent("fit",{detail:{oldValue:e.previousFontSize,newValue:e.currentFontSize,scaleFactor:e.currentFontSize/e.previousFontSize}}));},h=function(e,t){return function(){e.dirty=t,e.active&&u();}},w=function(e){return function(){a=a.filter((function(t){return t.element!==e.element})),e.observeMutations&&e.observer.disconnect(),e.element.style.whiteSpace=e.originalStyle.whiteSpace,e.element.style.display=e.originalStyle.display,e.element.style.fontSize=e.originalStyle.fontSize;}},b=function(e){return function(){e.active||(e.active=!0,u());}},z=function(e){return function(){return e.active=!1}},F=function(e){e.observeMutations&&(e.observer=new MutationObserver(h(e,i)),e.observer.observe(e.element,e.observeMutations));},g={minSize:16,maxSize:512,multiLine:!0,observeMutations:"MutationObserver"in e&&{subtree:!0,childList:!0,characterData:!0}},W=null,E=function(){e.clearTimeout(W),W=e.setTimeout(c(r),x.observeWindowDelay);},M=["resize","orientationchange"];return Object.defineProperty(x,"observeWindow",{set:function(t){var n="".concat(t?"add":"remove","EventListener");M.forEach((function(t){e[n](t,E);}));}}),x.observeWindow=!0,x.observeWindowDelay=100,x.fitAll=c(o),x}function C(e,t){var n=Object.assign({},g,t),i=e.map((function(e){var t=Object.assign({},n,{element:e,active:!0});return function(e){e.originalStyle={whiteSpace:e.element.style.whiteSpace,display:e.element.style.display,fontSize:e.element.style.fontSize},F(e),e.newbie=!0,e.dirty=!0,a.push(e);}(t),{element:e,fit:h(t,o),unfreeze:b(t),freeze:z(t),unsubscribe:w(t)}}));return u(),i}function x(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return "string"==typeof e?C(t(document.querySelectorAll(e)),n):C([e],n)[0]}}("undefined"==typeof window?null:window);
+
+const stzhPagetitleHeroCss = ".sc-stzh-pagetitle-hero-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-hero-h{display:none}.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero,.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero::before,.sc-stzh-pagetitle-hero-h *.sc-stzh-pagetitle-hero::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>img[slot=image],.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>[slot=image] img{display:block;position:absolute;width:100%;height:100%;top:0;left:0;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag][variant=filter]:not([disabled]){--color:var(--stzh-color-white);--border:0.0625rem solid var(--stzh-color-white);--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--counter-color:var(--stzh-color-white48);--icon-color:var(--stzh-color-white);--hover-color:var(--stzh-color-white);--hover-border:0.0625rem solid transparent;--hover-background-color:var(--stzh-color-white16);--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-white16);--hover-counter-color:var(--stzh-color-white);--hover-icon-color:var(--stzh-color-white)}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag][variant=filter][active]:not([active=false]):not([disabled]){--border:0.0625rem solid transparent;--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-pagetitle-hero-h .sc-stzh-pagetitle-hero-s>stzh-chip[slot=tag]:not(:last-child){margin-right:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero.sc-stzh-pagetitle-hero{padding-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle-hero__tags.sc-stzh-pagetitle-hero{list-style:none;padding:0;margin:0;display:-ms-flexbox;display:flex}.stzh-pagetitle-hero__tags.sc-stzh-pagetitle-hero:not(:empty){margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{position:absolute;left:0;top:0}}@media screen and (max-width: 1023px){.stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero:not(:empty){margin:var(--stzh-space-xlarge) 0}}.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{--stzh-flyingfocus-color:var(--stzh-base-invert-color);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;position:relative;z-index:1;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));padding:var(--stzh-space-xxxlarge) var(--stzh-space-xlarge);margin-top:calc(var(--stzh-space-xxxlarge) * -1)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-xxxxlarge) var(--stzh-space-xxlarge);margin-top:calc(var(--stzh-space-big) * -1)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-big)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{margin:var(--stzh-space-big) 0;width:50%;margin-left:-8.3333333333%}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{padding:var(--stzh-space-xbig)}}.stzh-pagetitle-hero__title.sc-stzh-pagetitle-hero{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-white);margin:0;font-size:1.875rem;line-height:1.107;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:normal;word-break:normal;word-break:break-word}@media screen and (min-width: 600px){.stzh-pagetitle-hero__title.sc-stzh-pagetitle-hero{font-size:2.8125rem}}.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);margin-top:var(--stzh-space-xlarge);color:var(--stzh-color-white)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__subtitle.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxxxlarge);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}@media screen and (min-width: 600px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-big)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:row;flex-direction:row}}.stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{position:relative;-ms-flex-negative:0;flex-shrink:0;background-color:var(--stzh-color-grey5);margin-left:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{width:58.3333333333%;margin-left:0;margin-right:0}}.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{position:relative;width:100%;height:0;padding-bottom:75%}@media screen and (min-width: 600px){.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{padding-bottom:56.25%}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__image-ratio.sc-stzh-pagetitle-hero{padding-bottom:75%}}.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin:0 auto;margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-huge);max-width:70%}}.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{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);margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{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)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero__lead-author.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-back-link.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-back-link.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{margin-right:-8.3333333333%}}.stzh-pagetitle-hero--has-no-lead.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__lead.sc-stzh-pagetitle-hero{display:none}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__image-wrapper.sc-stzh-pagetitle-hero{display:none}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__header.sc-stzh-pagetitle-hero{-ms-flex-direction:column;flex-direction:column;margin-top:0}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__title-wrapper.sc-stzh-pagetitle-hero{width:100%;margin:0}.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge);position:static}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle-hero--has-no-image.sc-stzh-pagetitle-hero .stzh-pagetitle-hero__back-link.sc-stzh-pagetitle-hero{margin-bottom:var(--stzh-space-xxxlarge)}}";
+
+const StzhPagetitleHero$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.init = () => {
+      const backLink = this.element.querySelector('stzh-link[slot="back-link"], [slot="back-link"] stzh-link');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const tags = this.element.querySelectorAll('stzh-chip[slot="tag"], [slot="tag"] stzh-chip');
+      if (backLink) {
+        setPropsIfNull(backLink, {
+          icon: "arrow-left-circle"
+        });
+      }
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      tags.forEach((tag) => {
+        setPropsIfNull(tag, {
+          role: "listitem"
+        });
+      });
+    };
+    this.reinitFitty = () => {
+      this.destroyFitty();
+      const isSmall = media("small").matches;
+      this.fitty = e(this.mainTitleElement, {
+        minSize: isSmall ? 45 : 32,
+        maxSize: isSmall ? 96 : 64
+      });
+    };
+    this.heading = "";
+    this.leadAuthor = "";
+    this.subtitle = "";
+  }
+  destroyFitty() {
+    if (this.fitty) {
+      this.fitty.unsubscribe();
+      this.fitty = null;
+    }
+  }
+  async componentWillUpdate() {
+    this.destroyFitty();
+  }
+  async componentDidRender() {
+    if (this.fitty) {
+      return;
+    }
+    this.reinitFitty();
+  }
+  connectedCallback() {
+    this.init();
+    addMediaChangeListener(this.reinitFitty);
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    removeMediaChangeListener(this.reinitFitty);
+    this.destroyFitty();
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const backLinkSlotUsed = hasSlot(this.element, "back-link");
+    const classes = {
+      "stzh-pagetitle-hero": true,
+      "stzh-pagetitle-hero--has-no-image": !imageSlotUsed,
+      "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
+      "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagetitle-hero__header" }, h("div", { class: "stzh-pagetitle-hero__back-link" }, h("slot", { name: "back-link" })), h("div", { class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { name: "image" })), h("div", { class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { name: "tag" })), h("div", { class: "stzh-pagetitle-hero__title-parent" }, h("h1", { ref: (el) => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title" }, this.heading)), this.subtitle &&
+      h("div", { class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { class: "stzh-pagetitle-hero__lead" }, h("slot", { name: "lead" }), h("div", { class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+  }
+  get element() { return this; }
+  static get style() { return stzhPagetitleHeroCss; }
+}, [6, "stzh-pagetitle-hero", {
+    "heading": [1],
+    "leadAuthor": [1, "lead-author"],
+    "subtitle": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-pagetitle-hero"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-pagetitle-hero":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhPagetitleHero$1);
+      }
+      break;
+  } });
+}
+
+const StzhPagetitleHero = StzhPagetitleHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhPagetitleHero, defineCustomElement };

package/dist/components/stzh-pagetitle.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as setPropsIfNull, h as hasSlot } from './utils.js';
 
-const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
 
 const StzhPagetitle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/stzh-popover2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
+import { i as isStzhElement } from './utils.js';
 import { f as fetchTranslations } from './translation-utils.js';
 import { m as media } from './media-utils.js';
 import { w as waitForEvent } from './event-utils.js';
@@ -277,8 +278,7 @@ const StzhPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   async componentWillLoad() {
-    this.labelId = `stzh-popover-label-${popoverCounter}`;
-    popoverCounter++;
+    this.labelId = `stzh-popover-label-${popoverCounter++}`;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "popover");
@@ -286,16 +286,18 @@ const StzhPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
     this.triggerElement.firstElementChild
-      .setAttribute("aria-expanded", "true");
+      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
   }
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
     this.triggerElement.firstElementChild
-      .setAttribute("aria-expanded", "false");
+      .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
@@ -335,7 +337,9 @@ const StzhPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
-    this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    }
   }
   render() {
     const classes = {