@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "components/stzh-actionset/stzh-actionset.js",
     "components/stzh-amount/stzh-amount.js",
     "components/stzh-anchornav/stzh-anchornav.js",
+    "components/stzh-app-bar/stzh-app-bar.js",
     "components/stzh-appointments/stzh-appointments.js",
     "components/stzh-archivelist/stzh-archivelist.js",
     "components/stzh-audio/stzh-audio.js",
@@ -30,6 +31,7 @@
     "components/stzh-chipselect/stzh-chipselect.js",
     "components/stzh-clamp/stzh-clamp.js",
     "components/stzh-contact/stzh-contact.js",
+    "components/stzh-contact-cv/stzh-contact-cv.js",
     "components/stzh-container/stzh-container.js",
     "components/stzh-content/stzh-content.js",
     "components/stzh-cspace/stzh-cspace.js",
@@ -128,6 +130,8 @@
     "components/stzh-twocolumns/stzh-twocolumns.js",
     "components/stzh-upload/stzh-upload.js",
     "components/stzh-vbz-carousel/stzh-vbz-carousel.js",
+    "components/stzh-vbz-connection-finder/stzh-vbz-connection-finder.js",
+    "components/stzh-vbz-intro/stzh-vbz-intro.js",
     "components/stzh-vbz-linechip/stzh-vbz-linechip.js",
     "components/stzh-vbz-majorticker/stzh-vbz-majorticker.js",
     "components/stzh-vbz-ticker/stzh-vbz-ticker.js",

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

@@ -167,11 +167,16 @@
   --stzh-section-padding-bottom: 0px;
   --stzh-section-margin-top: 0px;
   --stzh-section-margin-bottom: 0px;
+  --margin-left: inherit;
+  --margin-right: inherit;
 }
 
 .stzh-accordion {
   display: grid;
   gap: var(--stzh-space-xsmall);
+  margin-left: var(--margin-left);
+  margin-right: var(--margin-left);
+  /* is nested within another accordion */
 }
 .stzh-accordion__heading {
   margin-bottom: var(--stzh-space-small);
@@ -185,4 +190,38 @@
   .stzh-accordion__heading {
     margin-bottom: var(--stzh-space-large);
   }
+}
+.stzh-accordion--is-nested {
+  margin-left: calc(var(--stzh-space-medium) * -1);
+  margin-right: calc(var(--stzh-space-medium) * -1);
+}
+@media screen and (min-width: 600px) {
+  .stzh-accordion--is-nested {
+    margin-left: calc(var(--stzh-space-large) * -1);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-accordion--is-nested {
+    margin-left: calc(var(--stzh-space-xlarge) * -1);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion--is-nested {
+    margin-left: calc(var(--stzh-space-xxlarge) * -1);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-accordion--is-nested {
+    margin-right: calc(var(--stzh-space-large) * -1);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-accordion--is-nested {
+    margin-right: calc(var(--stzh-space-xlarge) * -1);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-accordion--is-nested {
+    margin-right: calc(var(--stzh-space-xxlarge) * -1);
+  }
 }

package/dist/collection/components/stzh-accordion/stzh-accordion.js

@@ -8,6 +8,7 @@ export class StzhAccordion {
     this.heading = "";
     this.collapsible = true;
     this.multiselectable = true;
+    this.isNested = undefined;
   }
   variantWatcher(newValue) {
     this.stzhVariantChange.emit({
@@ -63,9 +64,23 @@ export class StzhAccordion {
       accordionItem.focus();
     }
   }
+  checkIfNested() {
+    let parentElement = this.element.parentElement;
+    while (parentElement) {
+      if (parentElement.tagName.toLowerCase() === "stzh-accordion") {
+        this.isNested = true;
+        break;
+      }
+      parentElement = parentElement.parentElement;
+    }
+  }
+  componentDidLoad() {
+    this.checkIfNested();
+  }
   render() {
     const classes = {
       "stzh-accordion": true,
+      "stzh-accordion--is-nested": this.isNested,
     };
     return (h(Host, null, h("div", { class: classes }, this.heading && (h("div", { class: "stzh-accordion__heading" }, h("stzh-heading", { level: "2" }, this.heading))), h("slot", null))));
   }
@@ -163,6 +178,11 @@ export class StzhAccordion {
       }
     };
   }
+  static get states() {
+    return {
+      "isNested": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhVariantChange",

package/dist/collection/components/stzh-accordion/stzh-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-accordion.js","sourceRoot":"","sources":["../../../../src/components/stzh-accordion/stzh-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-accordion.js","sourceRoot":"","sources":["../../../../src/components/stzh-accordion/stzh-accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -494,6 +494,11 @@
     margin-top: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 900px) {
+  .stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty) + .stzh-accordion-item__heading-text, .stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty) + .stzh-accordion-item__heading-text {
+    margin-top: var(--stzh-space-xsmall);
+  }
+}
 .stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before, .stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after {
   transform: rotate(0) translate(-50%, -50%);
 }

package/dist/collection/components/stzh-anchornav/stzh-anchornav.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  *
  */
@@ -19,20 +19,21 @@ export class StzhAnchornav {
     this.stzhItemClick.emit({
       component: "stzh-anchornav",
       item,
-      originalEvent
+      originalEvent,
     });
   }
   async componentWillLoad() {
     this.itemsWatcher(this.items);
+    document.documentElement.style.setProperty("--stzh-anchornav-is-visible", "1");
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "anchornav");
     }
   }
   render() {
     const classes = {
-      "stzh-anchornav": true
+      "stzh-anchornav": true,
     };
-    return (h(Host, null, h("nav", { class: classes, role: "navigation", "aria-label": this.localization.title }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, item.label), h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" })))))));
+    return (h(Host, null, h("nav", { class: classes, role: "navigation", "aria-label": this.localization.title }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map(item => (h("a", { class: "stzh-anchornav__item", role: "listitem", href: item.href, onClick: e => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2, class: "stzh-anchornav__label" }, item.label), h("stzh-icon", { class: "stzh-anchornav__icon", name: item.icon || "arrow-down" }))))))));
   }
   static get is() { return "stzh-anchornav"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-anchornav/stzh-anchornav.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-anchornav.js","sourceRoot":"","sources":["../../../../src/components/stzh-anchornav/stzh-anchornav.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,EAEL,OAAO,EACR,MAAM,eAAe,CAAC;AASvB;;GAEG;AAMH,MAAM,OAAO,aAAa;;;iBASsB,EAAE;;EAMhD,YAAY,CAAC,QAAsC;IACjD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;EACH,CAAC;EAKO,WAAW,CAAC,IAAuB,EAAE,aAAyB;IACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACtB,SAAS,EAAE,gBAAgB;MAC3B,IAAI;MACJ,aAAa;KACd,CAAC,CAAA;EACJ,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,YAAY,CAAC,KAAK;QACxE,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACxB,SACE,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;UAEzC,kBAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAc;UAC7E,iBAAW,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,YAAY,GAAc,CACnF,CACL,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhAnchornavItem,\n  StzhAnchornavItemClickEvent\n} from \"../../index\";\n\nimport { StzhAnchornavLocalizedText } from \"./stzh-anchornav.localization\";\n\n/**\n * \n */\n@Component({\n  tag: \"stzh-anchornav\",\n  styleUrl: \"stzh-anchornav.scss\",\n  scoped: true\n})\nexport class StzhAnchornav {\n  /** Translation strings */\n  @Prop() localization: StzhAnchornavLocalizedText;\n\n  /**\n   * Initial selected values.\n   * Array of objects with `label`, `href` and `icon` attribute:\n   * `[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\"}]`\n   */\n  @Prop() items: StzhAnchornavItem[] | string = [];\n  private _items: StzhAnchornavItem[];\n\n  @Element() element: HTMLStzhAnchornavElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhAnchornavItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhAnchornavItemClickEvent>;\n\n  private handleClick(item: StzhAnchornavItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-anchornav\",\n      item,\n      originalEvent\n    })\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"anchornav\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-anchornav\": true\n    };\n\n    return (\n      <Host>\n        <nav class={classes} role=\"navigation\" aria-label={this.localization.title}>\n          <div class=\"stzh-anchornav__list\" role=\"list\">\n            {this._items.map((item) =>\n              <a\n                class=\"stzh-anchornav__item\"\n                role=\"listitem\"\n                href={item.href}\n                onClick={(e) => this.handleClick(item, e)}\n              >\n                <stzh-clamp lines={2} class=\"stzh-anchornav__label\">{item.label}</stzh-clamp>\n                <stzh-icon class=\"stzh-anchornav__icon\" name={item.icon || \"arrow-down\"}></stzh-icon>\n              </a>\n            )}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-anchornav.js","sourceRoot":"","sources":["../../../../src/components/stzh-anchornav/stzh-anchornav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAM9F;;GAEG;AAMH,MAAM,OAAO,aAAa;;;iBASsB,EAAE;;EAMhD,YAAY,CAAC,QAAsC;IACjD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;EACH,CAAC;EAKO,WAAW,CAAC,IAAuB,EAAE,aAAyB;IACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACtB,SAAS,EAAE,gBAAgB;MAC3B,IAAI;MACJ,aAAa;KACd,CAAC,CAAC;EACL,CAAC;EAED,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,6BAA6B,EAAE,GAAG,CAAC,CAAC;IAE/E,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;KACpG;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;KACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,YAAY,CAAC,KAAK;QACxE,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACvB,SAAG,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;UACtG,kBAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,uBAAuB,IAChD,IAAI,CAAC,KAAK,CACA;UACb,iBAAW,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,YAAY,GAAc,CACnF,CACL,CAAC,CACE,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhAnchornavItem, StzhAnchornavItemClickEvent } from \"../../index\";\n\nimport { StzhAnchornavLocalizedText } from \"./stzh-anchornav.localization\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-anchornav\",\n  styleUrl: \"stzh-anchornav.scss\",\n  scoped: true,\n})\nexport class StzhAnchornav {\n  /** Translation strings */\n  @Prop() localization: StzhAnchornavLocalizedText;\n\n  /**\n   * Initial selected values.\n   * Array of objects with `label`, `href` and `icon` attribute:\n   * `[{\"href\":\"#lorem\", \"label\": \"Label 1\"}, {\"href\":\"#lorem2\", \"label\": \"Label 2\"}]`\n   */\n  @Prop() items: StzhAnchornavItem[] | string = [];\n  private _items: StzhAnchornavItem[];\n\n  @Element() element: HTMLStzhAnchornavElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhAnchornavItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhAnchornavItemClickEvent>;\n\n  private handleClick(item: StzhAnchornavItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-anchornav\",\n      item,\n      originalEvent,\n    });\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    document.documentElement.style.setProperty(\"--stzh-anchornav-is-visible\", \"1\");\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"anchornav\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-anchornav\": true,\n    };\n\n    return (\n      <Host>\n        <nav class={classes} role=\"navigation\" aria-label={this.localization.title}>\n          <div class=\"stzh-anchornav__list\" role=\"list\">\n            {this._items.map(item => (\n              <a class=\"stzh-anchornav__item\" role=\"listitem\" href={item.href} onClick={e => this.handleClick(item, e)}>\n                <stzh-clamp lines={2} class=\"stzh-anchornav__label\">\n                  {item.label}\n                </stzh-clamp>\n                <stzh-icon class=\"stzh-anchornav__icon\" name={item.icon || \"arrow-down\"}></stzh-icon>\n              </a>\n            ))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-app-bar/stzh-app-bar.css

@@ -0,0 +1,253 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+: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;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+: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;
+}
+
+/**
+* @prop --stzh-app-bar-background-color: Background color of app bar buttons.
+* @prop --stzh-app-bar-hover-background-color: Hover background color of app bar buttons.
+*/
+:host {
+  --stzh-app-bar-background-color: var(--stzh-color-white);
+  --stzh-app-bar-hover-background-color: var(--stzh-color-coolgrey10);
+}
+:host ::slotted([slot=one]),
+:host ::slotted([slot=two]),
+:host ::slotted([slot=three]),
+:host ::slotted([slot=four]),
+:host ::slotted([slot=five]) {
+  position: relative;
+  flex-grow: 1;
+  --icon-text-margin: 0;
+  --background-color: var(--stzh-app-bar-background-color);
+  --hover-background-color: var(--stzh-app-bar-hover-background-color);
+  --padding-top: var(--stzh-space-xxsmall);
+  --padding-bottom: var(--stzh-space-xxsmall);
+  --padding-left: var(--stzh-space-xxsmall);
+  --padding-right: var(--stzh-space-xxsmall);
+}
+:host ::slotted([slot=one]) .stzh-button__inner,
+:host ::slotted([slot=two]) .stzh-button__inner,
+:host ::slotted([slot=three]) .stzh-button__inner,
+:host ::slotted([slot=four]) .stzh-button__inner,
+:host ::slotted([slot=five]) .stzh-button__inner {
+  flex-direction: column;
+  gap: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=one]) .stzh-button__inner,
+:host ::slotted([slot=two]) .stzh-button__inner,
+:host ::slotted([slot=three]) .stzh-button__inner,
+:host ::slotted([slot=four]) .stzh-button__inner,
+:host ::slotted([slot=five]) .stzh-button__inner {
+    flex-direction: inherit;
+  }
+}
+:host ::slotted([slot=one]) .stzh-button__text,
+:host ::slotted([slot=two]) .stzh-button__text,
+:host ::slotted([slot=three]) .stzh-button__text,
+:host ::slotted([slot=four]) .stzh-button__text,
+:host ::slotted([slot=five]) .stzh-button__text {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  font-size: var(--stzh-font-pico-font-size);
+  line-height: var(--stzh-font-pico-text-line-height);
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=one]) .stzh-button__text,
+:host ::slotted([slot=two]) .stzh-button__text,
+:host ::slotted([slot=three]) .stzh-button__text,
+:host ::slotted([slot=four]) .stzh-button__text,
+:host ::slotted([slot=five]) .stzh-button__text {
+    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);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=one]),
+:host ::slotted([slot=two]),
+:host ::slotted([slot=three]),
+:host ::slotted([slot=four]),
+:host ::slotted([slot=five]) {
+    --icon-text-margin: inherit;
+  }
+}
+:host ::slotted([slot=one]):not(:first-child):after,
+:host ::slotted([slot=two]):not(:first-child):after,
+:host ::slotted([slot=three]):not(:first-child):after,
+:host ::slotted([slot=four]):not(:first-child):after,
+:host ::slotted([slot=five]):not(:first-child):after {
+  content: "";
+  display: inline-block;
+  width: 0.0625rem;
+  background-color: var(--stzh-color-coolgrey20);
+  position: absolute;
+  top: var(--stzh-space-xsmall);
+  bottom: var(--stzh-space-xsmall);
+}
+
+.stzh-app-bar__buttons {
+  display: flex;
+  flex-direction: row;
+}

package/dist/collection/components/stzh-app-bar/stzh-app-bar.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-app-bar";
+const STORIES = ["default"];
+test.describe("app-bar", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL,
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-app-bar.e2e.js.map

package/dist/collection/components/stzh-app-bar/stzh-app-bar.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-app-bar.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-bar/stzh-app-bar.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-app-bar\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"app-bar\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-app-bar/stzh-app-bar.js

@@ -0,0 +1,54 @@
+import { h, Host } from "@stencil/core";
+import { setPropsIfNull } from "../../utils/utils";
+/**
+ * @slot one - Slot for first button
+ * @slot two - Slot for second button
+ * @slot three - Slot for third button
+ * @slot four - Slot for fourth button
+ * @slot five - Slot for fifth button
+ */
+export class StzhAppBar {
+  constructor() {
+    this.init = () => {
+      const buttons = this.element.querySelectorAll("stzh-button");
+      buttons.forEach(button => {
+        setPropsIfNull(button, {
+          variant: "tertiary",
+        });
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-app-bar": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-app-bar__buttons", role: "group" }, h("slot", { name: "one" }), h("slot", { name: "two" }), h("slot", { name: "three" }), h("slot", { name: "four" }), h("slot", { name: "five" })))));
+  }
+  static get is() { return "stzh-app-bar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-app-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-app-bar.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-app-bar.js.map

package/dist/collection/components/stzh-app-bar/stzh-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-app-bar.js","sourceRoot":"","sources":["../../../../src/components/stzh-app-bar/stzh-app-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;EALvB;IAUU,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;MAE7D,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACvB,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,UAAU;SACK,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;GAqCH;EAnCC,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,YAAM,IAAI,EAAC,KAAK,GAAQ;UACxB,YAAM,IAAI,EAAC,KAAK,GAAQ;UACxB,YAAM,IAAI,EAAC,OAAO,GAAQ;UAC1B,YAAM,IAAI,EAAC,MAAM,GAAQ;UACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot one - Slot for first button\n * @slot two - Slot for second button\n * @slot three - Slot for third button\n * @slot four - Slot for fourth button\n * @slot five - Slot for fifth button\n */\n@Component({\n  tag: \"stzh-app-bar\",\n  styleUrl: \"stzh-app-bar.scss\",\n  scoped: true,\n})\nexport class StzhAppBar {\n  @Element() element: HTMLStzhAppBarElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n\n    buttons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-app-bar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-app-bar__buttons\" role=\"group\">\n            <slot name=\"one\"></slot>\n            <slot name=\"two\"></slot>\n            <slot name=\"three\"></slot>\n            <slot name=\"four\"></slot>\n            <slot name=\"five\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-app-bar/stzh-app-bar.stories.js

@@ -0,0 +1,45 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-app-bar';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-app-bar>
+  <stzh-button slot="one" icon="gear">One</stzh-button>
+  <stzh-button slot="two" icon="gear">Two</stzh-button>
+  <stzh-button slot="three" icon="gear">Three</stzh-button>
+  <stzh-button slot="four" icon="gear">Four</stzh-button>
+  <stzh-button slot="five" icon="gear">Five</stzh-button>
+</stzh-app-bar>
+`;
+
+export default {
+  title: 'Components/AppBar',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'full',
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('9146-20745'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {}
+};

package/dist/collection/components/stzh-cardlist/stzh-cardlist.css

@@ -336,6 +336,11 @@
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-cardlist--layout-teasers.stzh-cardlist--max-3-cols .stzh-cardlist__cards, .stzh-cardlist--layout-pi-teasers.stzh-cardlist--max-3-cols .stzh-cardlist__cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 .stzh-cardlist--layout-searchresults .stzh-cardlist__cards {
   gap: var(--stzh-space-xlarge);
 }

package/dist/collection/components/stzh-cardlist/stzh-cardlist.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot - Slot for `stzh-card` elements
  * @slot description - Slot for description
@@ -59,22 +59,28 @@ export class StzhCardlist {
     this.sortableEnabled = false;
     this.sortableDataIdAttribute = "data-id";
     this.allCollapsed = false;
+    this.isStzhAnchornavVisible = false;
   }
   collapseListener() {
     this.updateCollapsedState();
   }
   async componentWillLoad() {
+    this.isStzhAnchornavVisible =
+      document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible") === "1";
     if (!this.localization) {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "cardlist");
     }
   }
   componentDidLoad() {
+    this.isStzhAnchornavVisible =
+      document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible") === "1";
     this.updateCollapsedState();
   }
   render() {
     const classes = {
       "stzh-cardlist": true,
       "stzh-cardlist--has-toggle-link": this.showToggleLink,
+      "stzh-cardlist--max-3-cols": this.isStzhAnchornavVisible,
       [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-cardlist__header" }, h("div", { class: "stzh-cardlist__description" }, this.description ? this.description : h("slot", { name: "description" })), this.showToggleLink && (h("stzh-link", { class: "stzh-cardlist__switch", icon: this.allCollapsed ? "list-expanded" : "list-shrinked", label: this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll, onClick: this.collapseClick }))), h("stzh-sortable", { disabled: !this.sortableEnabled, dataIdAttribute: this.sortableDataIdAttribute, ghostClone: this.sortableGhostClone }, h("div", { class: "stzh-cardlist__cards", role: "list" }, h("slot", null))))));
@@ -207,7 +213,8 @@ export class StzhCardlist {
   }
   static get states() {
     return {
-      "allCollapsed": {}
+      "allCollapsed": {},
+      "isStzhAnchornavVisible": {}
     };
   }
   static get events() {