@oiz/stzh-components 2.4.0-beta → 2.4.0

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

@@ -108,6 +108,7 @@
 :host ::slotted(stzh-input),
 :host ::slotted(stzh-datepicker),
 :host ::slotted(stzh-dropdown),
+:host ::slotted(stzh-langnav),
 :host ::slotted(stzh-fieldset),
 :host ::slotted(stzh-actions),
 :host ::slotted(stzh-upload),
@@ -181,6 +182,7 @@
 }
 :host ::slotted(p),
 :host ::slotted(stzh-text),
+:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -191,6 +193,7 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
+:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -201,6 +204,7 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
+:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -211,6 +215,7 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
+:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -221,6 +226,7 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(p),
 :host ::slotted(stzh-text),
+:host ::slotted(stzh-contact),
 :host ::slotted(ul),
 :host ::slotted(ol),
 :host ::slotted(dl),
@@ -351,8 +357,14 @@
 }
 :host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-anchornav),
+:host ::slotted(stzh-audio),
+:host ::slotted(stzh-microsite-teaserlist),
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
+:host ::slotted(stzh-sitemap),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
@@ -364,8 +376,14 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-anchornav),
+:host ::slotted(stzh-audio),
+:host ::slotted(stzh-microsite-teaserlist),
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
+:host ::slotted(stzh-sitemap),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
@@ -377,8 +395,14 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-anchornav),
+:host ::slotted(stzh-audio),
+:host ::slotted(stzh-microsite-teaserlist),
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
+:host ::slotted(stzh-sitemap),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
@@ -390,8 +414,14 @@
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-anchornav),
+:host ::slotted(stzh-audio),
+:host ::slotted(stzh-microsite-teaserlist),
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
+:host ::slotted(stzh-sitemap),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
@@ -403,8 +433,14 @@
 @media screen and (min-width: 1260px) {
   :host ::slotted(*) .section,
 :host ::slotted(.section),
+:host ::slotted(stzh-anchornav),
+:host ::slotted(stzh-audio),
+:host ::slotted(stzh-microsite-teaserlist),
+:host ::slotted(stzh-olmap),
+:host ::slotted(stzh-textandimage),
 :host ::slotted(stzh-figure),
 :host ::slotted(stzh-chart),
+:host ::slotted(stzh-sitemap),
 :host ::slotted(stzh-datalist),
 :host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),

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

@@ -126,6 +126,17 @@
   /* Vertical variant */
   /* Horizontal variant */
 }
+.stzh-datalist-item__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;
+}
 .stzh-datalist-item__wrapper {
   flex-grow: 1;
   display: flex;

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

@@ -1,4 +1,5 @@
 import { Host, h, Fragment } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for nested datalist
  */
@@ -16,6 +17,7 @@ export class StzhDatalistItem {
     this.handleHideBorderChange = (event) => {
       this.hideBorder = event.detail.value;
     };
+    this.localization = undefined;
     this.direction = "vertical";
     this.href = undefined;
     this.rel = undefined;
@@ -43,7 +45,7 @@ export class StzhDatalistItem {
         "is-button": isButton,
         "is-link": !!this.href
       }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-datalist-item__vhidden" }, this.localization.$globals.downloadLinkLabel), this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
         "stzh-datalist-item__meta": true,
         "is-button": isButton,
         "is-link": !!this.href
@@ -75,6 +77,11 @@ export class StzhDatalistItem {
       this.datalist = null;
     }
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "datalist-item");
+    }
+  }
   render() {
     const isButton = typeof this.a11yExpanded !== "undefined"
       || typeof this.a11yControls !== "undefined";
@@ -120,6 +127,26 @@ export class StzhDatalistItem {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "direction": {
         "type": "string",
         "mutable": false,

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

@@ -269,6 +269,11 @@
     margin-left: var(--stzh-space-xxlarge);
   }
 }
+@media screen and (min-width: 1024px) {
+  .stzh-datamessagelist-item__tags-wrapper {
+    flex-shrink: 0;
+  }
+}
 .stzh-datamessagelist-item__tags {
   display: flex;
   flex-wrap: wrap;
@@ -282,6 +287,11 @@
 .stzh-datamessagelist-item__tag {
   margin: var(--stzh-space-xxsmall);
 }
+@media screen and (min-width: 1024px) {
+  .stzh-datamessagelist-item__tag {
+    flex-shrink: 0;
+  }
+}
 .stzh-datamessagelist-item__actions {
   display: flex;
   flex-direction: column;

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

@@ -49,11 +49,11 @@ const TemplateButtonRight = (args) => (
 // we put this input inside another element
 // to test if autofocus works when the component
 // is used as a child of another stzh- component
-const TemplateAutofocus = (args) => (
-  <stzh-section>
-    <stzh-input {...args}></stzh-input>
-  </stzh-section>
-)
+// const TemplateAutofocus = (args) => (
+//   <stzh-section>
+//     <stzh-input {...args}></stzh-input>
+//   </stzh-section>
+// )
 
 export const Default = Template.bind({});
 Default.args = {
@@ -107,10 +107,10 @@ ButtonRight.args = {
   value: 'Lorem ipsum dolor sit amet.'
 };
 
-export const Autofocus = TemplateAutofocus.bind({});
-Autofocus.args = {
-  name: 'text',
-  label: 'Label',
-  description: 'This field should be focused on page load',
-  autofocus: true
-}
+// export const Autofocus = TemplateAutofocus.bind({});
+// Autofocus.args = {
+//   name: 'text',
+//   label: 'Label',
+//   description: 'This field should be focused on page load',
+//   autofocus: true
+// }

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

@@ -128,7 +128,7 @@
   --border: 0.0625rem solid 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;

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

@@ -177,6 +177,17 @@
   -webkit-text-decoration: var(--hover-text-decoration);
           text-decoration: var(--hover-text-decoration);
 }
+.stzh-link__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;
+}
 .stzh-link__inner {
   display: flex;
   align-items: center;

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

@@ -1,5 +1,6 @@
 import { Host, Fragment, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for text content
  * @slot icon - Slot for icon element
@@ -30,6 +31,7 @@ export class StzhLink {
         originalEvent: event
       });
     };
+    this.localization = undefined;
     this.icon = "";
     this.iconPosition = "left";
     this.size = "default";
@@ -67,12 +69,17 @@ export class StzhLink {
       h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
-    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
+    return (h("div", { class: "stzh-link__text" }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-link__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-link__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
     return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), (this.badge || this.badgeEmpty) && !iconUsed &&
       h("stzh-badge", { class: "stzh-link__badge", label: this.badge, type: this.badgeType })));
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "link");
+    }
+  }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
@@ -109,6 +116,26 @@ export class StzhLink {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "icon": {
         "type": "string",
         "mutable": false,

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

@@ -115,7 +115,7 @@
   --border: 0.0625rem solid 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;

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);
@@ -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-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%;