@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

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

@@ -3,7 +3,7 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
-import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
+import { Default as Menu_Default } from '../stzh-menu/stzh-menu.stories';
 
 export default {
   title: 'Components/Popover',
@@ -34,11 +34,9 @@ const Template = (args) => (
     <stzh-button>
       Click me
     </stzh-button>
-    <stzh-vspace slot="content" around size="small">
-      <stzh-hspace around>
-        <p>Popover content</p>
-      </stzh-hspace>
-    </stzh-vspace>
+    <stzh-space slot="content" around size="small">
+      <p>Popover content</p>
+    </stzh-space>
   </stzh-popover>
 );
 
@@ -48,7 +46,7 @@ const TemplateWithMenu = (args) => (
       Click me
     </stzh-button>
     <div slot="content">
-      <Menu></Menu>
+      {Menu_Default({})}
     </div>
     <stzh-button slot="action" variant="secondary" size="small">
       Logout

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

@@ -151,6 +151,7 @@ the .has-focus class is used by the focus target */
   /* Colors */
   --stzh-color-zueriblue: #0F05A0;
 
+  --stzh-color-zueriblue60op: #6F69C6;
   --stzh-color-zueriblue48: rgba(15, 5, 160, 0.48);
   --stzh-color-zueriblue32: rgba(15, 5, 160, 0.32);
   --stzh-color-zueriblue16: rgba(15, 5, 160, 0.16);
@@ -217,6 +218,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-zueriblue);
   --stzh-color-primary-hover: var(--stzh-color-zueribluedark);
 
+  --stzh-color-primary60op: var(--stzh-color-zueriblue60op);
   --stzh-color-primary48: var(--stzh-color-zueriblue48);
   --stzh-color-primary32: var(--stzh-color-zueriblue32);
   --stzh-color-primary16: var(--stzh-color-zueriblue16);
@@ -389,9 +391,9 @@ the .has-focus class is used by the focus target */
   --stzh-button-text-hover-background: rgba(15, 5, 160, 0.08);
 
   /* Richttext */
-  --stzh-richttext-blockquote-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-line-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-footer-color: var(--stzh-color-grey55);
+  --stzh-richtext-blockquote-color: var(--stzh-color-primary);
+  --stzh-richtext-blockquote-line-color: var(--stzh-color-primary);
+  --stzh-richtext-blockquote-footer-color: var(--stzh-color-grey55);
 
   /* Section */
   --stzh-section-background-color: transparent;
@@ -438,6 +440,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-tabasco);
   --stzh-color-primary-hover: var(--stzh-color-mahogany);
 
+  --stzh-color-primary60op: #CB7A73;
   --stzh-color-primary48: rgba(165, 26, 15, 0.48);
   --stzh-color-primary32: rgba(165, 26, 15, 0.32);
   --stzh-color-primary16: rgba(165, 26, 15, 0.16);
@@ -451,6 +454,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-deepcerulean);
   --stzh-color-primary-hover: var(--stzh-color-regalblue);
 
+  --stzh-color-primary60op: #7BB2CE;
   --stzh-color-primary48: rgba(5, 127, 172, 0.48);
   --stzh-color-primary32: rgba(5, 127, 172, 0.32);
   --stzh-color-primary16: rgba(5, 127, 172, 0.16);
@@ -467,6 +471,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-monza);
   --stzh-color-primary-hover: var(--stzh-color-venetianred);
 
+  --stzh-color-primary60op: #DF777E;
   --stzh-color-primary48: rgba(195, 0, 36, 0.48);
   --stzh-color-primary32: rgba(195, 0, 36, 0.32);
   --stzh-color-primary16: rgba(195, 0, 36, 0.16);
@@ -484,6 +489,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-shakespeare);
   --stzh-color-primary-hover: var(--stzh-color-chambray);
 
+  --stzh-color-primary60op: #95C0DE;
   --stzh-color-primary48: rgba(74, 150, 200, 0.48);
   --stzh-color-primary32: rgba(74, 150, 200, 0.32);
   --stzh-color-primary16: rgba(74, 150, 200, 0.16);
@@ -509,6 +515,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-aoz-agenda);
   --stzh-color-primary-hover: var(--stzh-color-aoz-agenda-hover);
 
+  --stzh-color-primary60op: #88BBB8;
   --stzh-color-primary48: rgba(47, 142, 135, 0.48);
   --stzh-color-primary32: rgba(47, 142, 135, 0.32);
   --stzh-color-primary16: rgba(47, 142, 135, 0.16);
@@ -520,6 +527,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-cool-grey60);
   --stzh-color-primary-hover: var(--stzh-color-cool-grey60-hover);
 
+  --stzh-color-primary60op: #9DAEB4;
   --stzh-color-primary48: rgba(92, 119, 129, 0.48);
   --stzh-color-primary32: rgba(92, 119, 129, 0.32);
   --stzh-color-primary16: rgba(92, 119, 129, 0.16);
@@ -531,6 +539,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-cobalt-blue60);
   --stzh-color-primary-hover: var(--stzh-color-cobalt-blue60-hover);
 
+  --stzh-color-primary60op: #7298EB;
   --stzh-color-primary48: rgba(3, 83, 220, 0.48);
   --stzh-color-primary32: rgba(3, 83, 220, 0.32);
   --stzh-color-primary16: rgba(3, 83, 220, 0.16);
@@ -542,6 +551,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-shamrock-green70);
   --stzh-color-primary-hover: var(--stzh-color-shamrock-green70-hover);
 
+  --stzh-color-primary60op: #7AAC7C;
   --stzh-color-primary48: rgba(6, 117, 30, 0.48);
   --stzh-color-primary32: rgba(6, 117, 30, 0.32);
   --stzh-color-primary16: rgba(6, 117, 30, 0.16);
@@ -553,6 +563,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-lime-green80);
   --stzh-color-primary-hover: var(--stzh-color-lime-green80-hover);
 
+  --stzh-color-primary60op: #8BA276;
   --stzh-color-primary48: rgba(58, 100, 19, 0.48);
   --stzh-color-primary32: rgba(58, 100, 19, 0.32);
   --stzh-color-primary16: rgba(58, 100, 19, 0.16);
@@ -564,6 +575,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-magenta70);
   --stzh-color-primary-hover: var(--stzh-color-magenta70-hover);
 
+  --stzh-color-primary60op: #C3719B;
   --stzh-color-primary48: rgba(150, 0, 85, 0.48);
   --stzh-color-primary32: rgba(150, 0, 85, 0.32);
   --stzh-color-primary16: rgba(150, 0, 85, 0.16);
@@ -575,6 +587,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-ocher70);
   --stzh-color-primary-hover: var(--stzh-color-ocher70-hover);
 
+  --stzh-color-primary60op: #C39D72;
   --stzh-color-primary48: rgba(154, 91, 1, 0.48);
   --stzh-color-primary32: rgba(154, 91, 1, 0.32);
   --stzh-color-primary16: rgba(154, 91, 1, 0.16);
@@ -586,6 +599,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-orange);
   --stzh-color-primary-hover: var(--stzh-color-orange-hover);
 
+  --stzh-color-primary60op: #F9B97D;
   --stzh-color-primary48: rgba(242, 139, 0, 0.48);
   --stzh-color-primary32: rgba(242, 139, 0, 0.32);
   --stzh-color-primary16: rgba(242, 139, 0, 0.16);
@@ -597,6 +611,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-orange70);
   --stzh-color-primary-hover: var(--stzh-color-orange70-hover);
 
+  --stzh-color-primary60op: #D38B71;
   --stzh-color-primary48: rgba(178, 58, 1, 0.48);
   --stzh-color-primary32: rgba(178, 58, 1, 0.32);
   --stzh-color-primary16: rgba(178, 58, 1, 0.16);
@@ -608,6 +623,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-red);
   --stzh-color-primary-hover: var(--stzh-color-red-hover);
 
+  --stzh-color-primary60op: #CC7B74;
   --stzh-color-primary48: rgba(165, 26, 15, 0.48);
   --stzh-color-primary32: rgba(165, 26, 15, 0.32);
   --stzh-color-primary16: rgba(165, 26, 15, 0.16);
@@ -619,6 +635,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-red60);
   --stzh-color-primary-hover: var(--stzh-color-red60-hover);
 
+  --stzh-color-primary60op: #ED7A78;
   --stzh-color-primary48: rgba(220, 3, 14, 0.48);
   --stzh-color-primary32: rgba(220, 3, 14, 0.32);
   --stzh-color-primary16: rgba(220, 3, 14, 0.16);
@@ -630,6 +647,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-violet70);
   --stzh-color-primary-hover: var(--stzh-color-violet70-hover);
 
+  --stzh-color-primary60op: #977CB4;
   --stzh-color-primary48: rgba(81, 35, 128, 0.48);
   --stzh-color-primary32: rgba(81, 35, 128, 0.32);
   --stzh-color-primary16: rgba(81, 35, 128, 0.16);
@@ -641,6 +659,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-winered);
   --stzh-color-primary-hover: var(--stzh-color-winered-hover);
 
+  --stzh-color-primary60op: #BB7380;
   --stzh-color-primary48: rgba(137, 7, 42, 0.48);
   --stzh-color-primary32: rgba(137, 7, 42, 0.32);
   --stzh-color-primary16: rgba(137, 7, 42, 0.16);
@@ -738,6 +757,9 @@ main .inline-filters button.muted[data-toggle]:focus,
 main {
   accent-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   /* Resets */
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */
@@ -1196,7 +1218,7 @@ main blockquote {
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -1245,7 +1267,7 @@ main blockquote {
   }
 }
 main blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -1280,7 +1302,7 @@ main blockquote p::after {
 main blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   main blockquote footer {
@@ -2701,6 +2723,9 @@ main .statistics-cell .statistic__data:after {
   border-left: 0.125rem solid var(--stzh-base-border-color);
 }
 main .ql-editor {
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */
@@ -3136,7 +3161,7 @@ main .ql-editor blockquote {
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -3185,7 +3210,7 @@ main .ql-editor blockquote {
   }
 }
 main .ql-editor blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -3220,7 +3245,7 @@ main .ql-editor blockquote p::after {
 main .ql-editor blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   main .ql-editor blockquote footer {

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

@@ -93,7 +93,7 @@ export class StzhProgressbar {
       "stzh-progressbar": true,
       [`stzh-progressbar--index-${this.index}`]: !!this.index
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, class: "stzh-progressbar__item" }), step.label))))));
   }
   static get is() { return "stzh-progressbar"; }
   static get encapsulation() { return "scoped"; }
@@ -126,7 +126,7 @@ export class StzhProgressbar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\"\n}\n```"
+          "text": "Step data (JSON array with objects that have `label` attribute and optional:\n- `disabled`, if step should be disabled\n- `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\",\n  \"disabled\": true\n}\n```"
         },
         "attribute": "data",
         "reflect": false,

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

@@ -89,7 +89,8 @@ FiveSteps.args = {
       "label": "Step C"
     },
     {
-      "label": "Step D"
+      "label": "Step D",
+      "disabled": true
     },
     {
       "label": "Step E"

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

@@ -113,11 +113,13 @@
   /* Passed */
   /* Current */
   /* Dotted */
+  /* Disabled */
 }
 .stzh-progressbar-item__button {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -127,12 +129,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);
@@ -150,7 +163,6 @@
   border: solid 0.0625rem var(--stzh-color-grey13);
   border-radius: 1.3125rem;
   text-align: center;
-  margin-bottom: var(--stzh-space-large);
   box-sizing: border-box;
   color: var(--stzh-color-grey55);
   transition-property: color, border-color;
@@ -167,6 +179,7 @@
   .stzh-progressbar-item__number-block {
     width: 2.625rem;
     height: 2.625rem;
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-progressbar-item__number-block::before {
@@ -181,6 +194,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;
@@ -200,17 +218,25 @@
   transition: background-color var(--stzh-base-transition-animation-speed);
 }
 .stzh-progressbar-item__label-block {
+  display: block;
   font-size: 0.875rem;
   line-height: 1.28;
   color: var(--stzh-color-grey55);
   padding: var(--stzh-space-xxsmall) var(--stzh-space-small);
   letter-spacing: 0.01em;
-  display: none;
   transition: color var(--stzh-base-transition-animation-speed);
 }
-@media screen and (min-width: 600px) {
+@media screen and (max-width: 599px) {
   .stzh-progressbar-item__label-block {
-    display: block;
+    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-progressbar-item__number, .stzh-progressbar-item__icon, .stzh-progressbar-item__user-icon, .stzh-progressbar-item__dotted-icon {
@@ -224,6 +250,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 +264,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   position: absolute;
   top: 0.1875rem;
   width: 1.6875rem;
@@ -247,9 +279,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 +302,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 +325,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 +384,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 +469,36 @@
 .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;
+  }
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__number-block {
+  background-color: var(--stzh-color-grey13);
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button {
+  cursor: not-allowed;
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+  color: var(--stzh-color-grey55);
+  border-color: var(--stzh-color-grey13);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block::after, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block::after {
+  display: none;
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
+  color: var(--stzh-color-grey55);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
+    color: GrayText;
+  }
 }

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

@@ -16,6 +16,7 @@ export class StzhProgressbarItem {
         originalEvent: event
       });
     };
+    this.disabled = false;
     this.first = false;
     this.last = false;
     this.passed = false;
@@ -34,10 +35,11 @@ export class StzhProgressbarItem {
       "stzh-progressbar-item--current": this.current,
       "stzh-progressbar-item--hide": this.hide,
       "stzh-progressbar-item--dotted": this.dotted,
-      "stzh-progressbar-item--has-icon": !!this.icon
+      "stzh-progressbar-item--has-icon": !!this.icon,
+      "stzh-progressbar-item--is-disabled": this.disabled
     };
     const dotted = (h("button", { class: "stzh-progressbar-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-progressbar-item__dotted-icon", name: "more-horizontal" })));
-    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { class: "stzh-progressbar-item__button", disabled: this.dotted && this.first, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
       ?
         h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
       :
@@ -58,6 +60,24 @@ export class StzhProgressbarItem {
   }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "first": {
         "type": "boolean",
         "mutable": false,

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;