@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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

@@ -95,12 +95,14 @@
 :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);
 }
 
 :host {
   --background-color: var(--stzh-color-white);
   --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --close-color: var(--stzh-base-lead-color);
+  --close-color: var(--stzh-color-grey70);
   --label-color: var(--stzh-base-color);
   --description-color: var(--stzh-base-color);
   --priority-high-link-color: var(--stzh-base-invert-color);
@@ -125,6 +127,7 @@
   display: flex;
   box-shadow: var(--stzh-box-shadow-message);
   background-color: var(--background-color);
+  border-radius: var(--stzh-button-border-radius);
 }
 @media screen and (min-width: 1024px) {
   .stzh-message {
@@ -211,58 +214,9 @@
 .stzh-message__description:empty + .stzh-message__link {
   margin-top: 0;
 }
-.stzh-message__close {
-  flex-shrink: 0;
-}
-@media screen and (min-width: 600px) {
-  .stzh-message__close {
-    margin-left: var(--stzh-space-small);
-  }
-}
-.stzh-message__close-button {
-  top: var(--stzh-space-medium);
-  right: var(--stzh-space-medium);
+.stzh-message__close[variant=tertiary] {
+  --color: var(--close-color);
   position: absolute;
-  display: flex;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font-family: inherit;
-  border: none;
-  background: none;
-  padding: var(--stzh-space-xsmall);
-  margin: calc(var(--stzh-space-xsmall) * -1);
-  border-radius: var(--stzh-button-border-radius);
-  cursor: pointer;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-message__close-button {
-    top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-message__close-button {
-    top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-message__close-button {
-    right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-message__close-button {
-    right: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 600px) {
-  .stzh-message__close-button {
-    position: initial;
-    top: initial;
-    right: initial;
-  }
-}
-.stzh-message__close-icon {
-  --size: var(--stzh-icon-size-medium);
-  color: var(--close-color);
+  top: 0;
+  right: 0;
 }

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

@@ -55,7 +55,7 @@ export class StzhMessage {
         || this.type === 'success' && "checkmark-circle"
         || this.type === 'warning' && "warning"
         || this.type === 'error' && "important-warning" })), h("div", { class: "stzh-message__text-wrapper" }, h("div", { class: "stzh-message__label" }, this.label), h("div", { class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-message__link" }, h("slot", { name: "link" })))), !this.hideClose &&
-      h("div", { class: "stzh-message__close" }, h("button", { class: "stzh-message__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-message__close-icon", name: "close" }))))));
+      h("stzh-button", { class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close" }))));
   }
   static get is() { return "stzh-message"; }
   static get encapsulation() { return "scoped"; }

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

@@ -95,22 +95,18 @@
 :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);
 }
 
 :host ::slotted(stzh-link) .stzh-link {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
   padding: var(--stzh-space-xsmall) var(--stzh-space-small);
-  color: var(--stzh-color-grey61);
-}
-:host ::slotted(stzh-link) .stzh-link:hover {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
-:host ::slotted(stzh-link) .stzh-link:hover .stzh-link__text {
-  text-decoration: underline;
-}
-:host ::slotted(stzh-link) .stzh-link__text {
-  text-decoration: none;
+  --color: var(--stzh-color-grey61);
+  --text-decoration-line: none;
+  --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-text-decoration-line: underline;
 }
 
 .stzh-metanav {

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

@@ -20,7 +20,9 @@ export class StzhMetanav {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-metanav", role: "list" }, h("slot", null))));

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 .stzh-microsite-teaserlist__filter {

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

@@ -73,7 +73,7 @@ export class StzhMicrositeTeaserlist {
     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, hideFooterBorder: true, withArrow: true }, item.image &&
+    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, hideFooterBorder: true, withArrow: true, hideElevation: 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 &&

package/dist/collection/components/stzh-olmap/assets/compass.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.0011 22.5728L13.2809 12.0132H2.72134L8.0011 22.5728Z" fill="#DEDEDE" stroke="#BFBFBF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" fill="#D0021B"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" stroke="#D0021B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.99976 1.42721L2.71999 11.9867H13.2795L7.99976 1.42721Z" stroke="black" stroke-opacity="0.2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -95,6 +95,8 @@
 :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);
 }
 
 stzh-olmap {
@@ -115,6 +117,8 @@ stzh-olmap *,
 stzh-olmap *::before,
 stzh-olmap *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 @media screen and (min-width: 800px) {
   stzh-olmap {
@@ -122,6 +126,11 @@ stzh-olmap *::after {
   }
 }
 
+.stzh-olmap {
+  /* Has no layer control */
+  /* Has no print control */
+  /* Has location control */
+}
 .stzh-olmap__map {
   position: absolute;
   width: 100%;
@@ -141,7 +150,8 @@ stzh-olmap *::after {
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
 .stzh-olmap .ol-zoom-in,
-.stzh-olmap .ol-zoom-out {
+.stzh-olmap .ol-zoom-out,
+.stzh-olmap .ol-rotate-reset {
   font-family: var(--stzh-font-family-light);
   font-weight: var(--stzh-font-weight-light);
   font-style: normal;
@@ -160,20 +170,22 @@ stzh-olmap *::after {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   transition: all var(--stzh-base-transition-animation-speed) ease;
   background-color: var(--stzh-color-white);
-  width: 2.5rem;
-  height: 2.375rem;
+  width: var(--stzh-form-input-small-height);
+  height: var(--stzh-form-input-small-height);
   cursor: pointer;
 }
 .stzh-olmap .ol-print stzh-icon,
 .stzh-olmap .ol-location stzh-icon,
 .stzh-olmap .ol-zoom-in stzh-icon,
-.stzh-olmap .ol-zoom-out stzh-icon {
+.stzh-olmap .ol-zoom-out stzh-icon,
+.stzh-olmap .ol-rotate-reset stzh-icon {
   --size: var(--stzh-icon-size-small);
 }
 .stzh-olmap .ol-print:hover,
 .stzh-olmap .ol-location:hover,
 .stzh-olmap .ol-zoom-in:hover,
-.stzh-olmap .ol-zoom-out:hover {
+.stzh-olmap .ol-zoom-out:hover,
+.stzh-olmap .ol-rotate-reset:hover {
   color: var(--stzh-color-white);
   background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -181,9 +193,11 @@ stzh-olmap *::after {
 .stzh-olmap .ol-layer,
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
-.stzh-olmap .ol-zoom {
+.stzh-olmap .ol-zoom,
+.stzh-olmap .ol-rotate-reset {
   position: absolute;
-  right: 0.625rem;
+  right: var(--stzh-space-xsmall);
+  bottom: var(--stzh-space-xsmall);
   box-shadow: var(--stzh-box-shadow-popover);
   border-radius: var(--stzh-form-input-border-radius);
 }
@@ -191,26 +205,27 @@ stzh-olmap *::after {
   .stzh-olmap .ol-layer,
 .stzh-olmap .ol-print,
 .stzh-olmap .ol-location,
-.stzh-olmap .ol-zoom {
-    right: 1.25rem;
+.stzh-olmap .ol-zoom,
+.stzh-olmap .ol-rotate-reset {
+    right: var(--stzh-space-large);
+    bottom: var(--stzh-space-large);
   }
 }
 .stzh-olmap .ol-layer {
-  left: 0.625rem;
-  bottom: 0.625rem;
+  left: var(--stzh-space-xsmall);
   right: auto;
   padding: var(--stzh-space-xxxsmall);
   border: none;
+  cursor: pointer;
 }
 @media screen and (min-width: 800px) {
   .stzh-olmap .ol-layer {
-    left: 1.25rem;
-    bottom: 1.25rem;
+    left: var(--stzh-space-large);
   }
 }
 .stzh-olmap .ol-layer__thumbnail {
-  width: 4.6875rem;
-  height: 4.6875rem;
+  width: 4.75rem;
+  height: 4.75rem;
   display: block;
 }
 .stzh-olmap .ol-layer__text {
@@ -233,12 +248,7 @@ stzh-olmap *::after {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
 .stzh-olmap .ol-location {
-  bottom: calc(3.75rem + 7.125rem + var(--stzh-space-small) * 2);
-}
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-location {
-    bottom: calc(4.375rem + 7.125rem + var(--stzh-space-small) * 2);
-  }
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }
 .stzh-olmap .ol-location.active {
   background: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -246,42 +256,92 @@ stzh-olmap *::after {
   color: var(--stzh-color-white);
 }
 .stzh-olmap .ol-zoom {
-  bottom: calc(3.75rem + 2.375rem + var(--stzh-space-small));
+  margin-bottom: calc(var(--stzh-form-input-small-height) + var(--stzh-space-xsmall));
   background-color: var(--stzh-color-grey13);
 }
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-zoom {
-    bottom: calc(4.375rem + 2.375rem + var(--stzh-space-small));
-  }
-}
 .stzh-olmap .ol-zoom-in {
   margin-bottom: 0.0625rem;
 }
-.stzh-olmap .ol-print {
-  bottom: 3.75rem;
+.stzh-olmap .ol-rotate-reset {
+  width: var(--stzh-space-xxlarge);
+  height: var(--stzh-space-xxlarge);
+  border-radius: 50%;
+  box-shadow: none;
+  border: 0.0625rem solid var(--stzh-color-grey13);
+  margin-right: calc((var(--stzh-form-input-small-height) - var(--stzh-space-xxlarge)) / 2);
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }
-@media screen and (min-width: 800px) {
-  .stzh-olmap .ol-print {
-    bottom: 4.375rem;
-  }
+.stzh-olmap .ol-rotate-reset span {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
 }
-.stzh-olmap .ol-rotate,
-.stzh-olmap .ol-attribution {
-  display: none;
+.stzh-olmap .ol-rotate-reset svg {
+  width: 0.99rem;
+  height: 1.32188rem;
+}
+.stzh-olmap .ol-hidden .ol-rotate-reset {
+  opacity: 0;
+}
+.stzh-olmap .ol-compass {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .stzh-olmap .ol-scale-line {
   position: absolute;
-  bottom: 0;
-  right: 0;
-  padding: var(--stzh-space-xxsmall);
-  background: var(--stzh-color-white);
-  border-top-left-radius: var(--stzh-form-input-border-radius);
+  bottom: var(--stzh-space-xsmall);
+  margin-left: calc(4.75rem + var(--stzh-space-xxxsmall) + var(--stzh-space-xsmall));
+  left: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 800px) {
+  .stzh-olmap .ol-scale-line {
+    bottom: var(--stzh-space-large);
+    left: var(--stzh-space-large);
+  }
 }
 .stzh-olmap .ol-scale-line-inner {
-  font-size: var(--stzh-font-pico-font-size);
-  line-height: var(--stzh-font-pico-text-line-height);
-  border: 0.0625rem solid var(--stzh-color-grey55);
-  border-top: 0;
-  color: var(--stzh-color-grey55);
+  font-size: var(--stzh-font-nano-font-size);
+  line-height: var(--stzh-font-nano-text-line-height);
+  position: relative;
+  color: var(--stzh-color-black);
   text-align: center;
+  filter: drop-shadow(-0.0625rem 0px 0px white) drop-shadow(0.0625rem 0px 0px white) drop-shadow(0px -0.0625rem 0px white) drop-shadow(0px 0.0625rem 0px white);
+}
+.stzh-olmap .ol-scale-line-inner::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.28125rem;
+  border: 0.0625rem solid var(--stzh-color-black);
+  border-top: 0;
+}
+.stzh-olmap .ol-attribution {
+  display: none;
+}
+.stzh-olmap--has-no-layer-control .ol-scale-line {
+  margin-left: 0;
+}
+.stzh-olmap--has-no-print-control .ol-zoom {
+  margin-bottom: 0;
+}
+.stzh-olmap--has-no-print-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 2 + var(--stzh-space-xsmall));
+}
+.stzh-olmap--has-location-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 4 + var(--stzh-space-xsmall) * 3);
+}
+.stzh-olmap--has-location-control.stzh-olmap--has-no-print-control .ol-location {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 2 + var(--stzh-space-xsmall));
+}
+.stzh-olmap--has-location-control.stzh-olmap--has-no-print-control .ol-rotate-reset {
+  margin-bottom: calc(var(--stzh-form-input-small-height) * 3 + var(--stzh-space-xsmall) * 2);
 }

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

@@ -25,6 +25,7 @@ import OlTilegridWmts from "ol/tilegrid/wmts";
 import OlInteraction from "ol/interaction";
 import OlStyleStyle from "ol/style/style";
 import OlStyleIcon from "ol/style/icon";
+import Compass from "./assets/compass.svg";
 const STYLES_MARKER_ICON = {
   anchor: [0.5, 1],
   anchorXUnits: "fraction",
@@ -39,6 +40,7 @@ const STYLES_POSITION_MARKER_ICON_STYLES = Object.assign(Object.assign({}, STYLE
  */
 export class StzhOlmap {
   constructor() {
+    this.geoPositionChanged = false;
     this.handlePostRender = () => {
       this.stzhPostRender.emit({
         component: "stzh-olmap"
@@ -129,6 +131,7 @@ export class StzhOlmap {
     this.locationControl = false;
     this.layer = "streets";
     this.zoom = 7;
+    this.zoomLocation = 7;
     this.center = [2683311, 1247082];
     this.centerMarker = true;
     this.resolutions = [
@@ -279,10 +282,17 @@ export class StzhOlmap {
       // listen to changes in position
       this.geolocation.on("change:position", () => {
         const position = this.geolocation.getPosition();
+        // zuerich location for testing (bprm6280, Ausbildungszentrum Rohwiesen)
+        // const position = [2685067, 1252482];
         this.positionMarkerOl.setGeometry(new OlGeomPoint(position));
-        // if position is within map, we center to it
-        if (OlExtent.containsExtent(this.layers[this.layer].options.extent, this.positionMarkerOl.getGeometry().getExtent())) {
+        // if position is within map and first time the position is changed, we center to it
+        if (!this.geoPositionChanged
+          && OlExtent.containsExtent(this.layers[this.layer].options.extent, this.positionMarkerOl.getGeometry().getExtent())) {
+          this.geoPositionChanged = true;
           this.map.getView().setCenter(position);
+          if (this.zoomLocation) {
+            this.map.getView().setZoom(this.zoomLocation);
+          }
         }
       });
       this.geolocation.on("change:tracking", () => {
@@ -388,8 +398,11 @@ export class StzhOlmap {
     }));
   }
   /** Enable user location tracking */
-  async enableLocationTracking() {
+  async enableLocationTracking(centerOnFirstGeoPositionChange = true) {
     this.setLocationControlState(true);
+    if (centerOnFirstGeoPositionChange) {
+      this.geoPositionChanged = false;
+    }
     if (this.geolocation) {
       this.geolocation.setTracking(true);
     }
@@ -401,6 +414,13 @@ export class StzhOlmap {
       this.geolocation.setTracking(false);
     }
   }
+  handleLoad() {
+    if (this.map) {
+      requestAnimationFrame(() => {
+        this.map.updateSize();
+      });
+    }
+  }
   setLocationControlState(active) {
     if (this.positionLayer) {
       this.positionLayer.setVisible(active);
@@ -416,13 +436,24 @@ export class StzhOlmap {
     const zoomOut = document.createElement("stzh-icon");
     zoomOut.ariaLabel = this.localization.zoomOutLabel;
     zoomOut.name = "minus";
+    const rotate = document.createElement('div');
+    rotate.innerHTML = Compass;
+    const rotateText = document.createElement("span");
+    rotateText.innerText = this.localization.rotateLabel;
+    rotate.appendChild(rotateText);
     const map = new OlMap({
       controls: OlControl.defaults({
+        // https://openlayers.org/en/v4.6.5/apidoc/olx.control.html#.ZoomOptions
         zoomOptions: {
           zoomInLabel: zoomIn,
           zoomOutLabel: zoomOut,
           zoomInTipLabel: "",
           zoomOutTipLabel: ""
+        },
+        // https://openlayers.org/en/v4.6.5/apidoc/olx.control.html#.RotateOptions
+        rotateOptions: {
+          label: rotate,
+          tipLabel: ""
         }
       }),
       interactions: OlInteraction.defaults({
@@ -520,8 +551,13 @@ export class StzhOlmap {
     this.layerWatcher(this.layer);
     this.centerWatcher(this.center);
     this.centerMarkerWatcher(this.centerMarker);
-    this.stzhInitialized.emit({
-      component: "stzh-olmap"
+    requestAnimationFrame(() => {
+      this.map.updateSize();
+      // test orientation on desktop
+      // this.map.getView().setRotation(45);
+      this.stzhInitialized.emit({
+        component: "stzh-olmap"
+      });
     });
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
@@ -562,7 +598,10 @@ export class StzhOlmap {
   }
   render() {
     const classes = {
-      "stzh-olmap": true
+      "stzh-olmap": true,
+      "stzh-olmap--has-no-layer-control": !this.layerControl,
+      "stzh-olmap--has-no-print-control": !this.printControl,
+      "stzh-olmap--has-location-control": this.locationControl
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { ref: (el) => (this.mapElement = el), class: "stzh-olmap__map" }))));
   }
@@ -584,7 +623,7 @@ export class StzhOlmap {
         "mutable": false,
         "complexType": {
           "original": "StzhOlmapLocalizedText",
-          "resolved": "StzhLocaleComponent & { streetsLayerTitle: string; satelliteLayerTitle: string; printLabel: string; zoomInLabel: string; zoomOutLabel: string; locationEnableLabel: string; locationDisableLabel: string; }",
+          "resolved": "StzhLocaleComponent & { streetsLayerTitle: string; satelliteLayerTitle: string; rotateLabel: string; printLabel: string; zoomInLabel: string; zoomOutLabel: string; locationEnableLabel: string; locationDisableLabel: string; }",
           "references": {
             "StzhOlmapLocalizedText": {
               "location": "import",
@@ -719,12 +758,30 @@ export class StzhOlmap {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Zoom"
+          "text": "Initial zoom"
         },
         "attribute": "zoom",
         "reflect": false,
         "defaultValue": "7"
       },
+      "zoomLocation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Zoom set when location is enabled"
+        },
+        "attribute": "zoom-location",
+        "reflect": false,
+        "defaultValue": "7"
+      },
       "center": {
         "type": "unknown",
         "mutable": false,
@@ -979,8 +1036,11 @@ export class StzhOlmap {
       },
       "enableLocationTracking": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(centerOnFirstGeoPositionChange?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -1039,4 +1099,25 @@ export class StzhOlmap {
         "methodName": "centerMarkerWatcher"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "load",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "deviceorientation",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pageshow",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { createBaseFocusTrapOptions } from "../../utils/overlay-utils";
 import { createFocusTrap } from 'focus-trap';
 const CLASS_BODY_OPEN = "stzh-overlay-open";
 /**
@@ -65,10 +66,7 @@ export class StzhOverlay {
     this.trap.updateContainerElements(this.element);
   }
   componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
+    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
     if (this.open) {
       this.dialogShown();
     }

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.css

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host {

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.js

@@ -20,7 +20,9 @@ export class StzhPageSkiplinks {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: "stzh-page-skiplinks", role: "list" }, h("slot", null))));

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

@@ -95,6 +95,8 @@
 :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);
 }
 
 :host ::slotted([slot=logo]) {