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

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

@@ -25,6 +25,7 @@ import OlTilegridWmts from "ol/tilegrid/wmts";
 import OlInteraction from "ol/interaction";
 import OlStyleStyle from "ol/style/style";
 import OlStyleIcon from "ol/style/icon";
+import Compass from "./assets/compass.svg";
 const STYLES_MARKER_ICON = {
   anchor: [0.5, 1],
   anchorXUnits: "fraction",
@@ -39,6 +40,7 @@ const STYLES_POSITION_MARKER_ICON_STYLES = Object.assign(Object.assign({}, STYLE
  */
 export class StzhOlmap {
   constructor() {
+    this.geoPositionChanged = false;
     this.handlePostRender = () => {
       this.stzhPostRender.emit({
         component: "stzh-olmap"
@@ -129,6 +131,7 @@ export class StzhOlmap {
     this.locationControl = false;
     this.layer = "streets";
     this.zoom = 7;
+    this.zoomLocation = 7;
     this.center = [2683311, 1247082];
     this.centerMarker = true;
     this.resolutions = [
@@ -279,10 +282,17 @@ export class StzhOlmap {
       // listen to changes in position
       this.geolocation.on("change:position", () => {
         const position = this.geolocation.getPosition();
+        // zuerich location for testing (bprm6280, Ausbildungszentrum Rohwiesen)
+        // const position = [2685067, 1252482];
         this.positionMarkerOl.setGeometry(new OlGeomPoint(position));
-        // if position is within map, we center to it
-        if (OlExtent.containsExtent(this.layers[this.layer].options.extent, this.positionMarkerOl.getGeometry().getExtent())) {
+        // if position is within map and first time the position is changed, we center to it
+        if (!this.geoPositionChanged
+          && OlExtent.containsExtent(this.layers[this.layer].options.extent, this.positionMarkerOl.getGeometry().getExtent())) {
+          this.geoPositionChanged = true;
           this.map.getView().setCenter(position);
+          if (this.zoomLocation) {
+            this.map.getView().setZoom(this.zoomLocation);
+          }
         }
       });
       this.geolocation.on("change:tracking", () => {
@@ -388,8 +398,11 @@ export class StzhOlmap {
     }));
   }
   /** Enable user location tracking */
-  async enableLocationTracking() {
+  async enableLocationTracking(centerOnFirstGeoPositionChange = true) {
     this.setLocationControlState(true);
+    if (centerOnFirstGeoPositionChange) {
+      this.geoPositionChanged = false;
+    }
     if (this.geolocation) {
       this.geolocation.setTracking(true);
     }
@@ -401,6 +414,13 @@ export class StzhOlmap {
       this.geolocation.setTracking(false);
     }
   }
+  handleLoad() {
+    if (this.map) {
+      requestAnimationFrame(() => {
+        this.map.updateSize();
+      });
+    }
+  }
   setLocationControlState(active) {
     if (this.positionLayer) {
       this.positionLayer.setVisible(active);
@@ -416,13 +436,24 @@ export class StzhOlmap {
     const zoomOut = document.createElement("stzh-icon");
     zoomOut.ariaLabel = this.localization.zoomOutLabel;
     zoomOut.name = "minus";
+    const rotate = document.createElement('div');
+    rotate.innerHTML = Compass;
+    const rotateText = document.createElement("span");
+    rotateText.innerText = this.localization.rotateLabel;
+    rotate.appendChild(rotateText);
     const map = new OlMap({
       controls: OlControl.defaults({
+        // https://openlayers.org/en/v4.6.5/apidoc/olx.control.html#.ZoomOptions
         zoomOptions: {
           zoomInLabel: zoomIn,
           zoomOutLabel: zoomOut,
           zoomInTipLabel: "",
           zoomOutTipLabel: ""
+        },
+        // https://openlayers.org/en/v4.6.5/apidoc/olx.control.html#.RotateOptions
+        rotateOptions: {
+          label: rotate,
+          tipLabel: ""
         }
       }),
       interactions: OlInteraction.defaults({
@@ -520,8 +551,13 @@ export class StzhOlmap {
     this.layerWatcher(this.layer);
     this.centerWatcher(this.center);
     this.centerMarkerWatcher(this.centerMarker);
-    this.stzhInitialized.emit({
-      component: "stzh-olmap"
+    requestAnimationFrame(() => {
+      this.map.updateSize();
+      // test orientation on desktop
+      // this.map.getView().setRotation(45);
+      this.stzhInitialized.emit({
+        component: "stzh-olmap"
+      });
     });
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
@@ -562,7 +598,10 @@ export class StzhOlmap {
   }
   render() {
     const classes = {
-      "stzh-olmap": true
+      "stzh-olmap": true,
+      "stzh-olmap--has-no-layer-control": !this.layerControl,
+      "stzh-olmap--has-no-print-control": !this.printControl,
+      "stzh-olmap--has-location-control": this.locationControl
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { ref: (el) => (this.mapElement = el), class: "stzh-olmap__map" }))));
   }
@@ -584,7 +623,7 @@ export class StzhOlmap {
         "mutable": false,
         "complexType": {
           "original": "StzhOlmapLocalizedText",
-          "resolved": "StzhLocaleComponent & { streetsLayerTitle: string; satelliteLayerTitle: string; printLabel: string; zoomInLabel: string; zoomOutLabel: string; locationEnableLabel: string; locationDisableLabel: string; }",
+          "resolved": "StzhLocaleComponent & { streetsLayerTitle: string; satelliteLayerTitle: string; rotateLabel: string; printLabel: string; zoomInLabel: string; zoomOutLabel: string; locationEnableLabel: string; locationDisableLabel: string; }",
           "references": {
             "StzhOlmapLocalizedText": {
               "location": "import",
@@ -719,12 +758,30 @@ export class StzhOlmap {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Zoom"
+          "text": "Initial zoom"
         },
         "attribute": "zoom",
         "reflect": false,
         "defaultValue": "7"
       },
+      "zoomLocation": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Zoom set when location is enabled"
+        },
+        "attribute": "zoom-location",
+        "reflect": false,
+        "defaultValue": "7"
+      },
       "center": {
         "type": "unknown",
         "mutable": false,
@@ -979,8 +1036,11 @@ export class StzhOlmap {
       },
       "enableLocationTracking": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(centerOnFirstGeoPositionChange?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
@@ -1039,4 +1099,25 @@ export class StzhOlmap {
         "methodName": "centerMarkerWatcher"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "load",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "deviceorientation",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pageshow",
+        "method": "handleLoad",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { createBaseFocusTrapOptions } from "../../utils/overlay-utils";
 import { createFocusTrap } from 'focus-trap';
 const CLASS_BODY_OPEN = "stzh-overlay-open";
 /**
@@ -65,10 +66,7 @@ export class StzhOverlay {
     this.trap.updateContainerElements(this.element);
   }
   componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
+    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
     if (this.open) {
       this.dialogShown();
     }

package/dist/collection/components/stzh-page-skiplinks/stzh-page-skiplinks.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted([slot=logo]) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted([slot=heading]) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(img[slot=image]),
@@ -110,33 +112,57 @@
   -o-object-position: center;
      object-position: center;
 }
-:host ::slotted(stzh-chip[slot=tag])[variant=filter]:not([disabled]) {
-  --color: var(--stzh-color-white);
-  --border-color: var(--stzh-color-white);
-  --remove-color: var(--stzh-color-white);
+:host ::slotted(stzh-chip[slot=tag])[variant=filter] {
+  --color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+  --remove-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --counter-color: var(--stzh-color-white56);
-  --icon-color: var(--stzh-color-white);
-  --hover-color: var(--stzh-color-white);
+  --icon-color: var(--stzh-base-invert-color);
+  --hover-color: var(--stzh-base-invert-color);
   --hover-border: 0.0625rem solid transparent;
   --hover-background-color: var(--stzh-color-white16);
-  --hover-remove-color: var(--stzh-color-white);
+  --hover-remove-color: var(--stzh-base-invert-color);
   --hover-remove-background-color: var(--stzh-color-white16);
-  --hover-counter-color: var(--stzh-color-white);
-  --hover-icon-color: var(--stzh-color-white);
+  --hover-counter-color: var(--stzh-base-invert-color);
+  --hover-icon-color: var(--stzh-base-invert-color);
 }
-:host ::slotted(stzh-chip[slot=tag])[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
+:host ::slotted(stzh-chip[slot=tag])[variant=filter][non-interactive]:not([non-interactive=false]) {
   --hover-color: var(--color);
   --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]) {
+:host ::slotted(stzh-chip[slot=tag])[active]:not([active=false]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --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));
+  --remove-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --background-color: var(--stzh-base-invert-color);
+  --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --counter-color: var(--stzh-color-primary60op);
+  --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-remove-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-remove-background-color: var(--stzh-color-white16);
+  --hover-icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-counter-color: var(--stzh-color-primary60op);
+}
+:host ::slotted(stzh-chip[slot=tag])[disabled]:not([disabled=false]) {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --remove-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --icon-color: var(--stzh-color-white32);
+  --counter-color: var(--stzh-color-white16);
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
+  --hover-remove-color: var(--stzh-color-white32);
+  --hover-remove-background-color: transparent;
+  --hover-icon-color: var(--stzh-color-white32);
+  --hover-counter-color: var(--stzh-color-white16);
 }
 :host ::slotted(stzh-chip[slot=tag]):not(:last-child) {
   margin-right: var(--stzh-space-xsmall);

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -99,6 +99,13 @@ body {
   display: none !important;
 }
 
+.stzh-layout-sticky-footer {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+  min-height: 100vh;
+}
+
 .stzh-dialog-open,
 .stzh-overlay-open {
   touch-action: none;
@@ -400,6 +407,8 @@ the .has-focus class is used by the focus target */
   /* Links */
   --stzh-link-color: var(--stzh-color-primary);
   --stzh-link-hover-color: var(--stzh-color-primary-hover);
+  --stzh-link-text-decoration-thickness: calc(1em / 16);
+  --stzh-link-text-underline-offset: calc(2.5em / 16);
   --stzh-link-icon-wrapper-height: 1em;
 
   /* Buttons */
@@ -772,6 +781,8 @@ the .has-focus class is used by the focus target */
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :root {
@@ -1548,8 +1559,10 @@ main a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
-main a:hover, main a:focus {
+main a:hover {
   color: var(--stzh-link-hover-color);
 }
 main .stzh-richtext__external-link {
@@ -1681,7 +1694,8 @@ main .data-picker.picker-single .picker-values div a {
      -moz-appearance: none;
           appearance: none;
   margin-bottom: var(--stzh-space-medium);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main [type=color]::-webkit-input-placeholder,
 main [type=date]::-webkit-input-placeholder,
@@ -2084,7 +2098,8 @@ main .process-header .process-header__container .process-header__info .heading-s
 }
 main .process-header__hashtag a {
   color: var(--stzh-base-invert-color);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .process-header__hashtag a:hover {
   color: var(--stzh-base-invert-color);
@@ -2165,7 +2180,8 @@ main .process-phase .meeting-polls__button {
 }
 main a,
 main .link {
-  text-decoration: underline;
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
   transition: var(--stzh-base-transition-animation-speed);
 }
 main a:hover,
@@ -2183,7 +2199,8 @@ main .button {
   line-height: var(--stzh-form-input-height)-0.125rem;
   line-height: inherit;
   margin: 0;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -2561,7 +2578,8 @@ main #most-commented .section-heading {
   margin-top: 0;
 }
 main #most-commented a {
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .section {
   margin-bottom: var(--stzh-space-xxlarge);
@@ -2648,7 +2666,8 @@ main .comment__header__context-menu__content-item {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   border: none;
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
   padding-left: var(--stzh-space-large);
@@ -2663,7 +2682,8 @@ main .dropdown .is-dropdown-submenu a:hover,
 main .comment__header__context-menu__content-item:hover {
   color: var(--stzh-color-grey70);
   background-color: var(--stzh-color-grey5);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .comment__header__context-menu__content-item {
   grid-gap: var(--stzh-space-small);
@@ -3502,8 +3522,10 @@ main .ql-editor a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
-main .ql-editor a:hover, main .ql-editor a:focus {
+main .ql-editor a:hover {
   color: var(--stzh-link-hover-color);
 }
 main .ql-editor .stzh-richtext__external-link {
@@ -3902,7 +3924,8 @@ main .tags li a {
   border: 0.0625rem solid var(--stzh-color-grey13);
   background-color: var(--stzh-color-white);
   transition: all var(--stzh-base-transition-animation-speed);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .card {
   color: var(--stzh-base-color);
@@ -3980,11 +4003,13 @@ main .card__top {
 main .card__link {
   display: flex;
   flex-direction: column;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   color: var(--stzh-base-color);
 }
 main .card__link:hover {
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .card__link .text-small {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
@@ -4335,7 +4360,8 @@ main .author-data__extra::before {
 }
 main .author-data__extra a {
   white-space: nowrap;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 main .author-data__extra > a,
 main .author-data__extra > button .author-data__extra > span {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host([hide]) {
@@ -377,7 +379,8 @@
   }
 }
 .stzh-progressbar-item--current .stzh-progressbar-item__label-block:hover {
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-progressbar-item--current .stzh-progressbar-item__number-block {
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));

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

@@ -95,11 +95,12 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   display: inline-block;
-  border-radius: var(--stzh-form-input-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: inherit;
@@ -204,6 +205,10 @@
   z-index: -1;
   opacity: 0;
   pointer-events: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--stzh-form-input-border-radius);
 }
 .stzh-radio__mark {
   border: 0.0625rem solid var(--stzh-color-grey61);

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
@@ -11,6 +11,7 @@ let radioCounter = 0;
  */
 export class StzhRadio {
   constructor() {
+    this.focusedByInput = false;
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -20,7 +21,14 @@ export class StzhRadio {
         checked: this.checked
       });
     };
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent('focus', {
         view: window,
         bubbles: false,
@@ -104,12 +112,12 @@ export class StzhRadio {
       "stzh-radio--is-invalid": this.invalid,
       "stzh-radio--is-disabled": this.disabled
     };
-    return (h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("label", { class: "stzh-radio__field-wrapper" }, h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { class: "stzh-radio__mark" }, h("div", { class: "stzh-radio__check" })), h("div", { class: "stzh-radio__label" }, this.label ? this.label : h("slot", null), this.showMarker &&
       h("span", { class: "stzh-radio__marker" }, h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
         ? this.localization.$globals.requiredFieldMarker
         : this.localization.$globals.optionalFieldMarker), h("span", { class: "stzh-radio__marker-text" }, this.required
         ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+        : this.localization.$globals.optionalFieldText)))), h(StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
   }
   static get is() { return "stzh-radio"; }
   static get encapsulation() { return "scoped"; }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host([direction=vertical]) ::slotted(stzh-radio:not(:last-child)) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-readspeaker {
@@ -112,6 +114,8 @@
 .stzh-readspeaker *::before,
 .stzh-readspeaker *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 .stzh-readspeaker .rsbtn_play {
   border: 0;

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

@@ -96,6 +96,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -817,8 +819,10 @@
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
-:host ::slotted(*) a:hover, :host ::slotted(*) a:focus {
+:host ::slotted(*) a:hover {
   color: var(--stzh-link-hover-color);
 }
 :host ::slotted(*) .stzh-richtext__external-link {