@oiz/stzh-components 2.4.0-beta → 2.5.0-alpha-carousel

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

@@ -100,14 +100,14 @@
 @-webkit-keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;
@@ -136,14 +136,14 @@
 @keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;

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

@@ -32,12 +32,12 @@ export class StzhMenuItem {
     this.badge = "";
     this.badgeType = "default";
     this.badgeEmpty = false;
-    this.icon = "";
+    this.disabled = false;
     this.active = false;
+    this.icon = "";
     this.label = "";
     this.href = "";
     this.target = "";
-    this.disabled = false;
     this.a11yLabel = undefined;
   }
   /** Focus menu item */
@@ -134,23 +134,23 @@ export class StzhMenuItem {
         "reflect": true,
         "defaultValue": "false"
       },
-      "icon": {
-        "type": "string",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon (use instead of icon slot)"
+          "text": "Whether the button is disabled"
         },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "active": {
         "type": "boolean",
@@ -167,10 +167,10 @@ export class StzhMenuItem {
           "text": "Whether the button is active"
         },
         "attribute": "active",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "label": {
+      "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -182,13 +182,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label"
+          "text": "Icon (use instead of icon slot)"
         },
-        "attribute": "label",
+        "attribute": "icon",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "href": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -200,13 +200,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`href` if the button should be used as link"
+          "text": "Label"
         },
-        "attribute": "href",
+        "attribute": "label",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "target": {
+      "href": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -218,29 +218,29 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Target if the button is used as link (if `href` used)"
+          "text": "`href` if the button should be used as link"
         },
-        "attribute": "target",
+        "attribute": "href",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "disabled": {
-        "type": "boolean",
+      "target": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether the button is disabled"
+          "text": "Target if the button is used as link (if `href` used)"
         },
-        "attribute": "disabled",
+        "attribute": "target",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
       "a11yLabel": {
         "type": "string",

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.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-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-pagetitle/stzh-pagetitle.js

@@ -53,7 +53,9 @@ export class StzhPagetitle {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const headingSlotUsed = hasSlot(this.element, 'heading');

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

@@ -112,10 +112,10 @@
 }
 :host ::slotted(stzh-chip[slot=tag])[variant=filter]:not([disabled]) {
   --color: var(--stzh-color-white);
-  --border: 0.0625rem solid var(--stzh-color-white);
+  --border-color: var(--stzh-color-white);
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-white48);
+  --counter-color: var(--stzh-color-white56);
   --icon-color: var(--stzh-color-white);
   --hover-color: var(--stzh-color-white);
   --hover-border: 0.0625rem solid transparent;
@@ -127,13 +127,13 @@
 }
 :host ::slotted(stzh-chip[slot=tag])[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
   --hover-color: var(--color);
-  --hover-border: var(--border);
+  --hover-border-color: var(--border-color);
   --hover-background-color: var(--background-color);
   --hover-icon-color: var(--icon-color);
   --hover-counter-color: var(--counter-color);
 }
 :host ::slotted(stzh-chip[slot=tag])[variant=filter][active]:not([active=false]):not([disabled]) {
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));

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

@@ -66,7 +66,9 @@ export class StzhPagetitleHero {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     removeMediaChangeListener(this.reinitFitty);
     this.destroyFitty();
   }

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

@@ -101,7 +101,7 @@
   --width: var(--stzh-popover-width);
   --min-width: var(--stzh-popover-min-width);
   --max-width: var(--stzh-popover-max-width);
-  --padding: 0;
+  --padding: 0px;
   --border-radius: var(--stzh-popover-border-radius);
 }
 :host[variant=tooltip] {
@@ -161,8 +161,8 @@
   .stzh-popover__backdrop {
     z-index: 1;
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
     overflow-x: hidden;

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

@@ -152,6 +152,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-zueriblue: #0F05A0;
 
   --stzh-color-zueriblue60op: #6F69C6;
+  --stzh-color-zueriblue88: rgba(15, 5, 160, 0.88);
+  --stzh-color-zueriblue72: rgba(15, 5, 160, 0.72);
+  --stzh-color-zueriblue64: rgba(15, 5, 160, 0.64);
+  --stzh-color-zueriblue56: rgba(15, 5, 160, 0.56);
   --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);
@@ -161,12 +165,20 @@ the .has-focus class is used by the focus target */
   --stzh-color-zueribluedark: #070250;
 
   --stzh-color-white: #FFFFFF;
+  --stzh-color-white88: rgba(255, 255, 255, 0.88);
+  --stzh-color-white72: rgba(255, 255, 255, 0.72);
+  --stzh-color-white64: rgba(255, 255, 255, 0.64);
+  --stzh-color-white56: rgba(255, 255, 255, 0.56);
   --stzh-color-white48: rgba(255, 255, 255, 0.48);
   --stzh-color-white32: rgba(255, 255, 255, 0.32);
   --stzh-color-white16: rgba(255, 255, 255, 0.16);
   --stzh-color-white8: rgba(255, 255, 255, 0.08);
 
   --stzh-color-black: #000000;
+  --stzh-color-black88: rgba(0, 0, 0, 0.88);
+  --stzh-color-black72: rgba(0, 0, 0, 0.72);
+  --stzh-color-black64: rgba(0, 0, 0, 0.64);
+  --stzh-color-black56: rgba(0, 0, 0, 0.56);
   --stzh-color-black48: rgba(0, 0, 0, 0.48);
   --stzh-color-black32: rgba(0, 0, 0, 0.32);
   --stzh-color-black16: rgba(0, 0, 0, 0.16);
@@ -219,6 +231,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-zueribluedark);
 
   --stzh-color-primary60op: var(--stzh-color-zueriblue60op);
+  --stzh-color-primary88: var(--stzh-color-zueriblue88);
+  --stzh-color-primary72: var(--stzh-color-zueriblue72);
+  --stzh-color-primary64: var(--stzh-color-zueriblue64);
+  --stzh-color-primary56: var(--stzh-color-zueriblue56);
   --stzh-color-primary48: var(--stzh-color-zueriblue48);
   --stzh-color-primary32: var(--stzh-color-zueriblue32);
   --stzh-color-primary16: var(--stzh-color-zueriblue16);
@@ -344,15 +360,15 @@ the .has-focus class is used by the focus target */
   --stzh-space-huge: 5rem;
   --stzh-space-xhuge: 6rem;
 
-  --stzh-space-none: 0.00001rem;
+  --stzh-space-none: 0.0001px;
 
   --stzh-space-default: var(--stzh-space-medium);
 
   /* Box Shadows */
-  --stzh-box-shadow-header: 0 -0.125rem 1rem rgba(0, 0, 0, 0.16);
-  --stzh-box-shadow-popover: 0 0 0.25rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-message: 0 0 0.5rem rgba(0, 0, 0, 0.24);
-  --stzh-box-shadow-overlay: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
+  --stzh-box-shadow-header: 0px -0.125rem 1rem rgba(0, 0, 0, 0.16);
+  --stzh-box-shadow-popover: 0px 0px 0.25rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-message: 0px 0px 0.5rem rgba(0, 0, 0, 0.24);
+  --stzh-box-shadow-overlay: 0px 0.25rem 0.9375rem rgba(0, 0, 0, 0.32);
 
   /* Icon sizes */
   --stzh-icon-size-xxsmall: 0.75rem;
@@ -430,7 +446,7 @@ the .has-focus class is used by the focus target */
   --stzh-tooltip-max-width: 20.875rem;
   --stzh-tooltip-padding: var(--stzh-space-small);
   --stzh-tooltip-border-radius: 0.1875rem;
-  --stzh-tooltip-drop-shadow: drop-shadow(0 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
+  --stzh-tooltip-drop-shadow: drop-shadow(0px 0.125rem 0.625rem rgba(0, 0, 0, 0.16));
 
   /* Accordion */
   --stzh-accordion-content-background: var(--stzh-color-grey5);
@@ -441,6 +457,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-mahogany);
 
   --stzh-color-primary60op: #CB7A73;
+  --stzh-color-primary88: rgba(165, 26, 15, 0.88);
+  --stzh-color-primary72: rgba(165, 26, 15, 0.72);
+  --stzh-color-primary64: rgba(165, 26, 15, 0.64);
+  --stzh-color-primary56: rgba(165, 26, 15, 0.56);
   --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);
@@ -455,6 +475,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-regalblue);
 
   --stzh-color-primary60op: #7BB2CE;
+  --stzh-color-primary88: rgba(5, 127, 172, 0.88);
+  --stzh-color-primary72: rgba(5, 127, 172, 0.72);
+  --stzh-color-primary64: rgba(5, 127, 172, 0.64);
+  --stzh-color-primary56: rgba(5, 127, 172, 0.56);
   --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);
@@ -472,6 +496,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-venetianred);
 
   --stzh-color-primary60op: #DF777E;
+  --stzh-color-primary88: rgba(195, 0, 36, 0.88);
+  --stzh-color-primary72: rgba(195, 0, 36, 0.72);
+  --stzh-color-primary64: rgba(195, 0, 36, 0.64);
+  --stzh-color-primary56: rgba(195, 0, 36, 0.56);
   --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);
@@ -490,6 +518,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-chambray);
 
   --stzh-color-primary60op: #95C0DE;
+  --stzh-color-primary88: rgba(74, 150, 200, 0.88);
+  --stzh-color-primary72: rgba(74, 150, 200, 0.72);
+  --stzh-color-primary64: rgba(74, 150, 200, 0.64);
+  --stzh-color-primary56: rgba(74, 150, 200, 0.56);
   --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);
@@ -516,6 +548,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-aoz-agenda-hover);
 
   --stzh-color-primary60op: #88BBB8;
+  --stzh-color-primary88: rgba(47, 142, 135, 0.88);
+  --stzh-color-primary72: rgba(47, 142, 135, 0.72);
+  --stzh-color-primary64: rgba(47, 142, 135, 0.64);
+  --stzh-color-primary56: rgba(47, 142, 135, 0.56);
   --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);
@@ -528,6 +564,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-cool-grey60-hover);
 
   --stzh-color-primary60op: #9DAEB4;
+  --stzh-color-primary88: rgba(92, 119, 129, 0.88);
+  --stzh-color-primary72: rgba(92, 119, 129, 0.72);
+  --stzh-color-primary64: rgba(92, 119, 129, 0.64);
+  --stzh-color-primary56: rgba(92, 119, 129, 0.56);
   --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);
@@ -540,6 +580,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-cobalt-blue60-hover);
 
   --stzh-color-primary60op: #7298EB;
+  --stzh-color-primary88: rgba(3, 83, 220, 0.88);
+  --stzh-color-primary72: rgba(3, 83, 220, 0.72);
+  --stzh-color-primary64: rgba(3, 83, 220, 0.64);
+  --stzh-color-primary56: rgba(3, 83, 220, 0.56);
   --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);
@@ -552,6 +596,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-shamrock-green70-hover);
 
   --stzh-color-primary60op: #7AAC7C;
+  --stzh-color-primary88: rgba(6, 117, 30, 0.88);
+  --stzh-color-primary72: rgba(6, 117, 30, 0.72);
+  --stzh-color-primary64: rgba(6, 117, 30, 0.64);
+  --stzh-color-primary56: rgba(6, 117, 30, 0.56);
   --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);
@@ -564,6 +612,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-lime-green80-hover);
 
   --stzh-color-primary60op: #8BA276;
+  --stzh-color-primary88: rgba(58, 100, 19, 0.88);
+  --stzh-color-primary72: rgba(58, 100, 19, 0.72);
+  --stzh-color-primary64: rgba(58, 100, 19, 0.64);
+  --stzh-color-primary56: rgba(58, 100, 19, 0.56);
   --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);
@@ -576,6 +628,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-magenta70-hover);
 
   --stzh-color-primary60op: #C3719B;
+  --stzh-color-primary88: rgba(150, 0, 85, 0.88);
+  --stzh-color-primary72: rgba(150, 0, 85, 0.72);
+  --stzh-color-primary64: rgba(150, 0, 85, 0.64);
+  --stzh-color-primary56: rgba(150, 0, 85, 0.56);
   --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);
@@ -588,6 +644,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-ocher70-hover);
 
   --stzh-color-primary60op: #C39D72;
+  --stzh-color-primary88: rgba(154, 91, 1, 0.88);
+  --stzh-color-primary72: rgba(154, 91, 1, 0.72);
+  --stzh-color-primary64: rgba(154, 91, 1, 0.64);
+  --stzh-color-primary56: rgba(154, 91, 1, 0.56);
   --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);
@@ -600,6 +660,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-orange-hover);
 
   --stzh-color-primary60op: #F9B97D;
+  --stzh-color-primary88: rgba(242, 139, 0, 0.88);
+  --stzh-color-primary72: rgba(242, 139, 0, 0.72);
+  --stzh-color-primary64: rgba(242, 139, 0, 0.64);
+  --stzh-color-primary56: rgba(242, 139, 0, 0.56);
   --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);
@@ -612,6 +676,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-orange70-hover);
 
   --stzh-color-primary60op: #D38B71;
+  --stzh-color-primary88: rgba(178, 58, 1, 0.88);
+  --stzh-color-primary72: rgba(178, 58, 1, 0.72);
+  --stzh-color-primary64: rgba(178, 58, 1, 0.64);
+  --stzh-color-primary56: rgba(178, 58, 1, 0.56);
   --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);
@@ -624,6 +692,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-red-hover);
 
   --stzh-color-primary60op: #CC7B74;
+  --stzh-color-primary88: rgba(165, 26, 15, 0.88);
+  --stzh-color-primary72: rgba(165, 26, 15, 0.72);
+  --stzh-color-primary64: rgba(165, 26, 15, 0.64);
+  --stzh-color-primary56: rgba(165, 26, 15, 0.56);
   --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);
@@ -636,6 +708,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-red60-hover);
 
   --stzh-color-primary60op: #ED7A78;
+  --stzh-color-primary88: rgba(220, 3, 14, 0.88);
+  --stzh-color-primary72: rgba(220, 3, 14, 0.72);
+  --stzh-color-primary64: rgba(220, 3, 14, 0.64);
+  --stzh-color-primary56: rgba(220, 3, 14, 0.56);
   --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);
@@ -648,6 +724,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-violet70-hover);
 
   --stzh-color-primary60op: #977CB4;
+  --stzh-color-primary88: rgba(81, 35, 128, 0.88);
+  --stzh-color-primary72: rgba(81, 35, 128, 0.72);
+  --stzh-color-primary64: rgba(81, 35, 128, 0.64);
+  --stzh-color-primary56: rgba(81, 35, 128, 0.56);
   --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);
@@ -660,6 +740,10 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary-hover: var(--stzh-color-winered-hover);
 
   --stzh-color-primary60op: #BB7380;
+  --stzh-color-primary88: rgba(137, 7, 42, 0.88);
+  --stzh-color-primary72: rgba(137, 7, 42, 0.72);
+  --stzh-color-primary64: rgba(137, 7, 42, 0.64);
+  --stzh-color-primary56: rgba(137, 7, 42, 0.56);
   --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);
@@ -1468,17 +1552,28 @@ main a {
 main a:hover, main a:focus {
   color: var(--stzh-link-hover-color);
 }
-main a .stzh-richtext__external-link {
+main .stzh-richtext__external-link {
   position: relative;
 }
-main a .stzh-richtext__external-icon-wrapper {
+main .stzh-richtext__external-vhidden {
+  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;
+}
+main .stzh-richtext__external-icon-wrapper {
   position: relative;
   display: inline-block;
   width: var(--stzh-icon-size-default);
   height: var(--stzh-link-icon-wrapper-height);
   margin-left: var(--stzh-space-xxsmall);
 }
-main a .stzh-richtext__external-icon {
+main .stzh-richtext__external-icon {
   --icon: var(--stzh-icon-size-default);
   position: absolute;
   top: 50%;
@@ -3411,17 +3506,28 @@ main .ql-editor a {
 main .ql-editor a:hover, main .ql-editor a:focus {
   color: var(--stzh-link-hover-color);
 }
-main .ql-editor a .stzh-richtext__external-link {
+main .ql-editor .stzh-richtext__external-link {
   position: relative;
 }
-main .ql-editor a .stzh-richtext__external-icon-wrapper {
+main .ql-editor .stzh-richtext__external-vhidden {
+  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;
+}
+main .ql-editor .stzh-richtext__external-icon-wrapper {
   position: relative;
   display: inline-block;
   width: var(--stzh-icon-size-default);
   height: var(--stzh-link-icon-wrapper-height);
   margin-left: var(--stzh-space-xxsmall);
 }
-main .ql-editor a .stzh-richtext__external-icon {
+main .ql-editor .stzh-richtext__external-icon {
   --icon: var(--stzh-icon-size-default);
   position: absolute;
   top: 50%;

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

@@ -141,7 +141,9 @@ export class StzhRadiogroup {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;

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

@@ -40,7 +40,9 @@ export class StzhReadspeaker {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
   render() {
     const classes = {

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

@@ -821,17 +821,28 @@
 :host ::slotted(*) a:hover, :host ::slotted(*) a:focus {
   color: var(--stzh-link-hover-color);
 }
-:host ::slotted(*) a .stzh-richtext__external-link {
+:host ::slotted(*) .stzh-richtext__external-link {
   position: relative;
 }
-:host ::slotted(*) a .stzh-richtext__external-icon-wrapper {
+:host ::slotted(*) .stzh-richtext__external-vhidden {
+  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;
+}
+:host ::slotted(*) .stzh-richtext__external-icon-wrapper {
   position: relative;
   display: inline-block;
   width: var(--stzh-icon-size-default);
   height: var(--stzh-link-icon-wrapper-height);
   margin-left: var(--stzh-space-xxsmall);
 }
-:host ::slotted(*) a .stzh-richtext__external-icon {
+:host ::slotted(*) .stzh-richtext__external-icon {
   --icon: var(--stzh-icon-size-default);
   position: absolute;
   top: 50%;