@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -0,0 +1,58 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+// import { withDesign } from 'storybook-addon-designs';
+// import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Microsite/Teaserlist',
+  component: 'stzh-microsite-teaserlist',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    // design: {
+    //   type: 'figma',
+    //   url: getFigmaLink('microsite-teaserlist'),
+    //   allowFullscreen: true
+    // }
+  },
+  decorators: [
+    // withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-microsite-teaserlist {...args}></stzh-microsite-teaserlist>
+);
+
+const tags = `[
+  {
+    "id": "",
+    "name": "Alle"
+  },
+  {
+    "id": "digitale-stadt",
+    "name": "Digitale Stadt"
+  },
+  {
+    "id": "lorem",
+    "name": "Lorem"
+  },
+  {
+    "id": "dolor-sit",
+    "name": "Dolor Sit"
+  },
+  {
+    "id": "ipsum",
+    "name": "Ipsum"
+  }
+]`
+
+export const Default = Template.bind({});
+Default.args = {
+  api: 'mock/microsite-teaserlist.json',
+  tags
+};

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

@@ -92,7 +92,7 @@ export class StzhOlmap {
       </style>
 
       <div class="stzh-olmap__map stzh-olmap__map--print">
-        <img class="stzh-olmap__print-image" src="${img}" alt="">
+        <img class="stzh-olmap__print-image" src="${img}">
         ${this.element.querySelector(".ol-scale-line.ol-unselectable").outerHTML}
       </div>
     `;

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.stories.js

@@ -30,7 +30,7 @@ const Template = (args) => (
 
 const TemplateWithLogo = (args) => (
   <stzh-pagebottom {...args}>
-    <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich" />
+    <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich, go to homepage" />
   </stzh-pagebottom>
 );
 

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

@@ -111,20 +111,29 @@
   }
 }
 :host ::slotted([slot=image]) {
-  margin-top: var(--stzh-space-xxlarge);
-  margin-bottom: var(--stzh-space-xxlarge);
+  margin-top: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-top: var(--stzh-space-xlarge);
+  }
 }
 :host ::slotted([slot=lead]) {
-  margin-top: var(--stzh-space-medium);
+  margin-top: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-large);
+    margin-top: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted([slot=lead]) {
-    margin-top: var(--stzh-space-xlarge);
+    margin-top: var(--stzh-space-xxxlarge);
   }
 }
 

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.css

@@ -217,7 +217,7 @@
 }
 @media screen and (min-width: 600px) {
   .stzh-pagetitle-hero__title {
-    font-size: 3rem;
+    font-size: 2.8125rem;
   }
 }
 .stzh-pagetitle-hero__subtitle {

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

@@ -33,7 +33,7 @@ export class StzhPagetitleHero {
       this.destroyFitty();
       const isSmall = media("small").matches;
       this.fitty = Fitty(this.mainTitleElement, {
-        minSize: isSmall ? 48 : 32,
+        minSize: isSmall ? 45 : 32,
         maxSize: isSmall ? 96 : 64
       });
     };

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

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

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { computePosition, offset, shift, flip, arrow, autoUpdate, } from "@floating-ui/dom";
 import { createFocusTrap } from "focus-trap";
+import { isStzhElement } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { media } from "../../utils/media-utils";
 import { waitForEvent } from "../../utils/event-utils";
@@ -213,6 +214,9 @@ export class StzhPopover {
     }
   }
   async openWatcher(newValue) {
+    if (!this.dialogElement) {
+      return;
+    }
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
@@ -276,8 +280,7 @@ export class StzhPopover {
     }
   }
   async componentWillLoad() {
-    this.labelId = `stzh-popover-label-${popoverCounter}`;
-    popoverCounter++;
+    this.id = `stzh-popover-${popoverCounter++}`;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "popover");
@@ -285,16 +288,18 @@ export class StzhPopover {
   }
   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();
     }
@@ -302,6 +307,17 @@ export class StzhPopover {
   componentDidRender() {
     this.computePosition();
     this.open ? this.popoverShown() : this.popoverHidden();
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+    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);
+    }
   }
   componentDidUpdate() {
     this.trap.updateContainerElements(this.dialogElement);
@@ -334,7 +350,9 @@ export class StzhPopover {
     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 = {
@@ -343,8 +361,8 @@ export class StzhPopover {
       [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
       [`stzh-popover--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
-      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: this.labelId, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
+    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
+      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
   }
   static get is() { return "stzh-popover"; }
   static get encapsulation() { return "scoped"; }
@@ -495,7 +513,7 @@ export class StzhPopover {
         "mutable": false,
         "complexType": {
           "original": "StzhPopoverLocalizedText",
-          "resolved": "StzhLocaleComponent & { close: string; }",
+          "resolved": "StzhLocaleComponent & { open: string; close: string; }",
           "references": {
             "StzhPopoverLocalizedText": {
               "location": "import",

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -1198,6 +1198,7 @@ main blockquote {
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   main blockquote {
@@ -3137,6 +3138,7 @@ main .ql-editor blockquote {
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   main .ql-editor blockquote {

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;
@@ -274,8 +275,8 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-radio--is-disabled .stzh-radio__input ~ .stzh-radio__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-radio--is-disabled .stzh-radio__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }

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-richtext/stzh-richtext.css

@@ -523,6 +523,7 @@
 :host ::slotted(*) ul, :host ::slotted(*) ol, :host ::slotted(*) dl {
   list-style: none;
   padding-left: 0;
+  overflow: hidden;
 }
 :host ::slotted(*) ol {
   counter-reset: li-counter;
@@ -567,6 +568,7 @@
   margin: var(--stzh-space-xxlarge);
   color: var(--stzh-richttext-blockquote-color);
   position: relative;
+  overflow: hidden;
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(*) blockquote {

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

@@ -0,0 +1,113 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) {
+  --font-family: var(--stzh-font-family-heavy);
+  --font-weight: var( --stzh-font-weight-heavy);
+  --color: var(--stzh-base-color);
+  --action-display: none;
+}
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-sitemap stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) stzh-datalist-item[href]:not([href=""]) {
+  --font-family: var(--stzh-font-family-regular);
+  --font-weight: var( --stzh-font-weight-regular);
+}