@oiz/stzh-components 2.2.0-beta → 2.2.0

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

@@ -118,6 +118,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -127,12 +128,23 @@
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    color: Highlight;
+    border-color: Highlight;
+  }
+}
 .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block::after, .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block::after {
   background-color: var(--stzh-color-primary8);
 }
 .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
+    color: Highlight;
+  }
+}
 .stzh-progressbar-item__number-block {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
@@ -181,6 +193,11 @@
   z-index: -2;
   overflow: hidden;
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__number-block::before {
+    background-color: CanvasText;
+  }
+}
 @media screen and (min-width: 600px) {
   .stzh-progressbar-item__number-block::before {
     top: 1.25rem;
@@ -224,6 +241,11 @@
   transform: translate(-50%, -50%);
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__icon, .stzh-progressbar-item__user-icon, .stzh-progressbar-item__dotted-icon {
+    color: CanvasText;
+  }
+}
 .stzh-progressbar-item__user-icon {
   --size: var(--stzh-icon-size-small);
   color: currentColor;
@@ -233,6 +255,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   position: absolute;
   top: 0.1875rem;
   width: 1.6875rem;
@@ -247,9 +270,19 @@
 .stzh-progressbar-item__dotted:hover, .stzh-progressbar-item__dotted:focus {
   border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__dotted:hover, .stzh-progressbar-item__dotted:focus {
+    border-color: Highlight;
+  }
+}
 .stzh-progressbar-item__dotted:hover::after, .stzh-progressbar-item__dotted:focus::after {
   background-color: var(--stzh-color-primary8);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__dotted:hover::after, .stzh-progressbar-item__dotted:focus::after {
+    background-color: Canvas;
+  }
+}
 @media screen and (min-width: 600px) {
   .stzh-progressbar-item__dotted {
     top: 0.3125rem;
@@ -260,6 +293,11 @@
 .stzh-progressbar-item__dotted:hover .stzh-progressbar-item__dotted-icon, .stzh-progressbar-item__dotted:focus .stzh-progressbar-item__dotted-icon {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item__dotted:hover .stzh-progressbar-item__dotted-icon, .stzh-progressbar-item__dotted:focus .stzh-progressbar-item__dotted-icon {
+    color: Highlight;
+  }
+}
 .stzh-progressbar-item--first .stzh-progressbar-item__number-block::before, .stzh-progressbar-item--last .stzh-progressbar-item__number-block::before {
   display: block;
 }
@@ -278,31 +316,57 @@
     right: calc((100% / var(--steps)) - (0.96875rem));
   }
 }
-.stzh-progressbar-item--passed .stzh-progressbar-item__number-block {
-  background-color: var(--stzh-color-white);
-  border: solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));
-}
 .stzh-progressbar-item--passed .stzh-progressbar-item__label-block {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: normal;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
-.stzh-progressbar-item--passed .stzh-progressbar-item__user-icon {
-  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+.stzh-progressbar-item--passed .stzh-progressbar-item__number-block {
+  background-color: var(--stzh-color-white);
+  border: solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--passed .stzh-progressbar-item__number-block {
+    background-color: Canvas;
+    border-color: CanvasText;
+  }
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--passed .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--passed .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    border-color: Highlight;
+  }
 }
 .stzh-progressbar-item--passed .stzh-progressbar-item__number-block, .stzh-progressbar-item--passed .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--passed .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
   color: transparent;
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--passed .stzh-progressbar-item__number-block, .stzh-progressbar-item--passed .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--passed .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    color: Canvas;
+  }
+}
+.stzh-progressbar-item--passed .stzh-progressbar-item__user-icon {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
 .stzh-progressbar-item--passed .stzh-progressbar-item__button:hover .stzh-progressbar-item__user-icon, .stzh-progressbar-item--passed .stzh-progressbar-item__button:focus .stzh-progressbar-item__user-icon {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--passed .stzh-progressbar-item__button:hover .stzh-progressbar-item__user-icon, .stzh-progressbar-item--passed .stzh-progressbar-item__button:focus .stzh-progressbar-item__user-icon {
+    color: Highlight;
+  }
+}
 .stzh-progressbar-item--current .stzh-progressbar-item__label-block {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);
   font-style: normal;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__label-block {
+    color: SelectedItem;
+  }
+}
 .stzh-progressbar-item--current .stzh-progressbar-item__label-block:hover {
   text-decoration: none;
 }
@@ -311,17 +375,49 @@
   border: solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));
   color: var(--stzh-color-white);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__number-block {
+    color: SelectedItem;
+    border-color: SelectedItem;
+    background-color: Canvas;
+  }
+}
 .stzh-progressbar-item--current .stzh-progressbar-item__number-block::before {
   display: block;
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   z-index: -1;
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__number-block::before {
+    background-color: CanvasText;
+  }
+}
 .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
   color: var(--stzh-color-white);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    color: Highlight;
+  }
+}
 .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block::after, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block::after {
   background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block::after, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block::after {
+    background-color: Canvas;
+  }
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__user-icon {
+    color: SelectedItem;
+  }
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__icon, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__icon, .stzh-progressbar-item--current .stzh-progressbar-item__button:hover .stzh-progressbar-item__user-icon, .stzh-progressbar-item--current .stzh-progressbar-item__button:focus .stzh-progressbar-item__user-icon {
+    color: Highlight;
+  }
+}
 .stzh-progressbar-item--dotted.stzh-progressbar-item--first .stzh-progressbar-item__number-block {
   margin-bottom: 0;
 }
@@ -364,4 +460,9 @@
 .stzh-progressbar-item--first .stzh-progressbar-item__number-block::before {
   background-color: var(--stzh-color-white);
   z-index: 1;
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--first .stzh-progressbar-item__number-block::before {
+    background-color: Canvas;
+  }
 }

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

@@ -165,6 +165,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

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

@@ -165,6 +165,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

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

@@ -121,6 +121,24 @@
   }
 }
 
+@media screen and (min-width: 600px) {
+  :host([floating]:not([floating=false])) {
+    --col-left-width: 45%;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size=small][floating]:not([floating=false])) {
+    --col-left-width: 33%;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([size=large][floating]:not([floating=false])) {
+    --col-left-width: 55%;
+  }
+}
+
 :host ::slotted([slot=left]) {
   margin-bottom: var(--stzh-space-xxxlarge);
 }
@@ -130,12 +148,26 @@
   }
 }
 
-:host([floating]:not([floating=false])) ::slotted([slot=left]) {
+:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]) {
+  margin-bottom: var(--stzh-space-xxlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]) {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]) {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
+
+:host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]) {
   float: left;
   width: 100%;
 }
 @media screen and (min-width: 600px) {
-  :host([floating]:not([floating=false])) ::slotted([slot=left]) {
+  :host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]) {
     width: calc(var(--col-left-width) - var(--stzh-space-large) / 2);
     margin-right: var(--stzh-space-large);
   }
@@ -146,6 +178,7 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   margin: 0 calc(var(--stzh-space-large) / -2);
+  /* Fullwidth variant */
   /* Floating variant */
 }
 .stzh-textandimage__left, .stzh-textandimage__right  {
@@ -162,6 +195,9 @@
     width: calc(100% - var(--col-left-width));
   }
 }
+.stzh-textandimage--is-fullwidth .stzh-textandimage__left, .stzh-textandimage--is-fullwidth .stzh-textandimage__right {
+  width: 100%;
+}
 .stzh-textandimage--is-floating .stzh-textandimage__left {
   width: auto;
 }

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

@@ -7,6 +7,7 @@ import { hasSlot } from "../../utils/utils";
 export class StzhTextandimage {
   constructor() {
     this.floating = false;
+    this.fullwidth = false;
     this.size = "default";
   }
   render() {
@@ -16,6 +17,7 @@ export class StzhTextandimage {
       "stzh-textandimage": true,
       "stzh-textandimage--has-left": leftSlotUsed,
       "stzh-textandimage--has-right": rightSlotUsed,
+      "stzh-textandimage--is-fullwidth": this.fullwidth,
       "stzh-textandimage--is-floating": this.floating,
       [`stzh-textandimage--size-${this.size}`]: !!this.size
     };
@@ -54,6 +56,24 @@ export class StzhTextandimage {
         "reflect": true,
         "defaultValue": "false"
       },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether display columns fullwidth on every breakpoint (not just mobile)"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "size": {
         "type": "string",
         "mutable": false,

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

@@ -167,6 +167,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

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

@@ -155,6 +155,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background-color: transparent;
   padding: 0;

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

@@ -169,6 +169,9 @@ export class StzhTooltip {
     return await this.computePosition();
   }
   async openWatcher(newValue) {
+    if (!this.contentElement) {
+      return;
+    }
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
@@ -224,7 +227,7 @@ export class StzhTooltip {
     return this._trigger.indexOf(trigger) > -1;
   }
   async componentWillLoad() {
-    this.labelId = `stzh-tooltip-label-${tooltipCounter++}`;
+    this.id = `stzh-tooltip-${tooltipCounter++}`;
     this.triggerWatcher(this.trigger);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "tooltip");
@@ -232,10 +235,27 @@ export class StzhTooltip {
   }
   componentDidRender() {
     this.computePosition();
-    if (this.interactive) {
-      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+    if (this.hasTrigger("click")) {
       this.triggerElement.firstElementChild
         .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-describedby"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-describedby")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+      }
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-label"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-label")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+      }
+    }
+    else {
+      if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-describedby"))
+        || this.triggerElement.firstElementChild.getAttribute("aria-describedby")) {
+        this.triggerElement.firstElementChild
+          .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-content`);
+      }
     }
     if (this.trap) {
       this.open ? this.trap.activate() : this.trap.deactivate();
@@ -294,8 +314,9 @@ export class StzhTooltip {
       [`stzh-tooltip--open`]: this.open,
       [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), h("div", { class: "stzh-tooltip__content", ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
-      h("h2", { id: this.labelId, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), this.hasTrigger("click") &&
+      h("div", { class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { class: "stzh-tooltip__content", id: `${this.id}-content`, ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
+      h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
       h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
   }
   static get is() { return "stzh-tooltip"; }
@@ -484,7 +505,7 @@ export class StzhTooltip {
         "mutable": false,
         "complexType": {
           "original": "StzhTooltipLocalizedText",
-          "resolved": "StzhLocaleComponent & { close: string; }",
+          "resolved": "StzhLocaleComponent & { open: string; close: string; }",
           "references": {
             "StzhTooltipLocalizedText": {
               "location": "import",

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

@@ -184,6 +184,7 @@ stzh-upload *::after {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.js

@@ -40,7 +40,8 @@ export class StzhVbzLinechip {
     this.chip.focus();
   }
   render() {
-    const lineData = LineColors[this.line] || {};
+    const lineData = LineColors[this.line]
+      || {};
     const styles = {
       color: this.global
         ? "rgb(0, 0, 0)"

package/dist/collection/pages/egov.stories.js

@@ -26,7 +26,7 @@ const Template = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -100,16 +100,16 @@ const Template = (args) => (
                 </stzh-message>
 
                 <stzh-fieldset legend="Name, E-Mail and Password">
-                  <stzh-dropdown
+                  <stzh-radiogroup
                     show-marker
                     name="salutation"
-                    no-search
-                    label="Salutation"
-                    options='[
-                      { "text": "Mrs.", "value": "mrs" },
-                      { "text": "Mr.", "value": "mr" }
-                    ]'
-                  ></stzh-dropdown>
+                    legend="Salutation"
+                    direction="horizontal"
+                    required
+                  >
+                    <stzh-radio value="mrs">Mrs.</stzh-radio>
+                    <stzh-radio value="mr">Mr</stzh-radio>
+                  </stzh-radiogroup>
 
                   <stzh-input show-marker name="title" label="Title" description="Helptext"></stzh-input>
 

package/dist/collection/pages/example.stories.js

@@ -27,7 +27,7 @@ const Template = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">

package/dist/collection/pages/meinkonto.stories.js

@@ -61,7 +61,7 @@ const TemplateServices = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -256,7 +256,7 @@ const TemplateMessages = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">
@@ -518,7 +518,7 @@ const TemplateActivities = (args) => (
       <img
         slot="logo"
         src="media/logo/stzh-default.svg"
-        alt="Logo Stadt Zürich"
+        alt="Logo City Zürich, go to homepage"
       ></img>
 
       <nav slot="nav" id="anchorNavMeta">

package/dist/collection/patterns/contact.stories.js

@@ -5,7 +5,9 @@ import { getFigmaLink } from '../../figma';
 import {
   OrganizationWithPobox as Contactaddress_OrganizationWithPobox,
   FurtherContactOrganization as Contactaddress_FurtherContactOrganization,
-  WithImageAndAvailability as Contactaddress_WithImageAndAvailability
+  WithImageAndAvailability as Contactaddress_WithImageAndAvailability,
+  MinimalOrganization as Contactaddress_MinimalOrganization,
+  FurtherContactPerson as Contactaddress_FurtherContactPerson
 } from '../components/stzh-contactaddress/stzh-contactaddress.stories';
 
 import {
@@ -34,6 +36,55 @@ export default {
   ]
 };
 
+const Template = (args) => (
+  <div>
+    <stzh-heading level="2" with-border>Kontakt</stzh-heading>
+    <stzh-vspace curve="medium"></stzh-vspace>
+
+    <Contactaddress_OrganizationWithPobox {... {...Contactaddress_OrganizationWithPobox.args, 'with-border': false } }></Contactaddress_OrganizationWithPobox>
+    <stzh-vspace curve="small"></stzh-vspace>
+
+    <stzh-datalist>
+      <stzh-datalist-item value="Website" href="#"></stzh-datalist-item>
+      <stzh-details>
+        <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
+        <Contactform {...Contactform.args} slot="content"></Contactform>
+      </stzh-details>
+    </stzh-datalist>
+
+    <stzh-vspace curve="medium"></stzh-vspace>
+    <stzh-olmap></stzh-olmap>
+
+    <stzh-vspace curve="medium"></stzh-vspace>
+    <Contactaddress_FurtherContactOrganization {... {...Contactaddress_FurtherContactOrganization.args, 'with-border': false } }></Contactaddress_FurtherContactOrganization>
+    <stzh-vspace curve="small"></stzh-vspace>
+
+    <stzh-datalist>
+      <stzh-datalist-item value="Website" href="#" target="_blank" rel="external nofollow"></stzh-datalist-item>
+    </stzh-datalist>
+  </div>
+);
+
+const TemplateFurtherContact = (args) => (
+  <div>
+    <stzh-heading level="2" with-border>Kontakt</stzh-heading>
+    <stzh-vspace curve="medium"></stzh-vspace>
+
+    <Contactaddress_MinimalOrganization {... {...Contactaddress_MinimalOrganization.args, 'with-border': false } }></Contactaddress_MinimalOrganization>
+    <stzh-vspace curve="small"></stzh-vspace>
+
+    <stzh-datalist>
+      <stzh-details>
+        <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
+        <Contactform {...Contactform.args} slot="content"></Contactform>
+      </stzh-details>
+    </stzh-datalist>
+
+    <stzh-vspace curve="medium"></stzh-vspace>
+    <Contactaddress_FurtherContactPerson {... {...Contactaddress_FurtherContactPerson.args, 'with-border': false } }></Contactaddress_FurtherContactPerson>
+  </div>
+);
+
 const TemplateNew = (args) => (
   <div>
     <stzh-cspace>
@@ -80,39 +131,14 @@ const TemplateNew = (args) => (
   </div>
 );
 
-const Template = (args) => (
-  <div>
-    <stzh-heading level="2" with-border>Kontakt</stzh-heading>
-    <stzh-vspace curve="medium"></stzh-vspace>
-
-    <Contactaddress_OrganizationWithPobox {... {...Contactaddress_OrganizationWithPobox.args, 'with-border': false } }></Contactaddress_OrganizationWithPobox>
-    <stzh-vspace curve="small"></stzh-vspace>
-
-    <stzh-datalist>
-      <stzh-datalist-item value="Website" href="#"></stzh-datalist-item>
-      <stzh-details>
-        <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
-        <Contactform {...Contactform.args} slot="content"></Contactform>
-      </stzh-details>
-    </stzh-datalist>
-
-    <stzh-vspace curve="medium"></stzh-vspace>
-    <stzh-olmap></stzh-olmap>
-
-    <stzh-vspace curve="medium"></stzh-vspace>
-    <Contactaddress_FurtherContactOrganization {... {...Contactaddress_FurtherContactOrganization.args, 'with-border': false } }></Contactaddress_FurtherContactOrganization>
-    <stzh-vspace curve="small"></stzh-vspace>
-
-    <stzh-datalist>
-      <stzh-datalist-item value="Website" href="#" target="_blank" rel="external nofollow"></stzh-datalist-item>
-    </stzh-datalist>
-  </div>
-);
-
 export const Default = Template.bind({});
 Default.args = {
 };
 
+export const FurtherContact = TemplateFurtherContact.bind({});
+FurtherContact.args = {
+};
+
 export const New = TemplateNew.bind({});
 New.args = {
 };