npm - @oiz/stzh-components - Versions diffs - 2.4.0 → 2.5.0-alpha - Mend

@oiz/stzh-components 2.4.0 → 2.5.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (884) hide show

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

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

@@ -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 CHANGED Viewed

@@ -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: 0.0625rem solid 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: 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;
-  --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));
+:host ::slotted(stzh-chip[slot=tag])[active]:not([active=false]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --border-color: transparent;
+  --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-pagetitle-hero/stzh-pagetitle-hero.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -95,13 +95,15 @@
 :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 {
   --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 +163,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 CHANGED Viewed

@@ -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;
@@ -360,15 +367,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;
@@ -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 */
@@ -446,7 +455,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);
@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-radiogroup/stzh-radiogroup.js CHANGED Viewed

@@ -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-ratio/stzh-ratio.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-readspeaker/stzh-readspeaker.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 {

package/dist/collection/components/stzh-row/stzh-row.css CHANGED Viewed

@@ -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-saptcha/stzh-saptcha.css CHANGED Viewed

@@ -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-saptcha__box {

package/dist/collection/components/stzh-section/stzh-section.css CHANGED Viewed

@@ -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-share/stzh-share.css CHANGED Viewed

@@ -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-share__list {

package/dist/collection/components/stzh-show/stzh-show.css CHANGED Viewed

@@ -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-sitemap/stzh-sitemap.css CHANGED Viewed

@@ -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-sitemap stzh-datalist-item[href]:not([href=""]) {

package/dist/collection/components/stzh-skiplink/stzh-skiplink.css CHANGED Viewed

@@ -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(:not([focused])) {
@@ -113,7 +115,8 @@
   background: var(--stzh-color-white);
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   transition: color var(--stzh-base-transition-animation-speed);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
 }
 .stzh-skiplink:not(:focus):not(:active) {
   border: 0;

package/dist/collection/components/stzh-skiplink/stzh-skiplink.stories.js CHANGED Viewed

@@ -32,22 +32,17 @@ const Template = (args) => (
       <p>Use <code>tab</code> key to see skiplink.</p>
     </stzh-text>
     <stzh-skiplink {...args}>
-      Skip over input elements
+      Skip to last input element
     </stzh-skiplink>
     <stzh-input label="Test input"></stzh-input>
     <stzh-input label="Test input"></stzh-input>
-    <div id="nextModule">
-      <stzh-vspace>
-        <stzh-button>Test button</stzh-button>
-        <stzh-button>Test button</stzh-button>
-      </stzh-vspace>
-    </div>
+    <stzh-input id="lastInput" label="Test input"></stzh-input>
   </stzh-vspace>
 );
 export const Default = Template.bind({});
 Default.args = {
-  href: '#nextModule',
+  href: '#lastInput',
   'link-accesskey': '1',
   'link-title': '[ALT + 1]'
 };

package/dist/collection/components/stzh-sortable/stzh-sortable.css CHANGED Viewed

@@ -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 {
@@ -102,7 +104,7 @@
   --grabbing-cursor: grabbing;
   --unselected-item-opacity: 0.6;
   --ghost-item-background: var(--stzh-color-grey5);
-  --ghost-item-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.32);
+  --ghost-item-box-shadow: inset 0px 0px 0.5rem rgba(0, 0, 0, 0.32);
 }
 :host[disabled] {
   --cursor: inherit;

package/dist/collection/components/stzh-sortable/stzh-sortable.js CHANGED Viewed

@@ -311,7 +311,9 @@ export class StzhSortable {
     });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
     this.unsetAttributes();
     if (this.sortable) {
       this.sortable.destroy();