@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -274,13 +277,15 @@
        column-count: var(--columns);
 }
 .stzh-anchornav__list {
-  margin: calc(var(--stzh-space-xxsmall) / -2);
+  margin: calc((var(--stzh-space-large) / 2) / -2);
 }
 .stzh-anchornav__item {
-  padding: calc(var(--stzh-space-xxsmall));
+  --text-decoration: none;
+  --hover-text-decoration: underline;
+  padding: calc(var(--stzh-space-large) / 2);
 }
 .stzh-anchornav--has-border {
-  padding: calc(var(--stzh-space-small)) 0;
+  padding: calc(var(--stzh-space-large)) 0;
   border-top: 0.0625rem solid var(--stzh-base-border-color);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }

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

@@ -35,7 +35,7 @@ export class StzhAnchornav {
       "stzh-anchornav": true,
       "stzh-anchornav--has-border": this.withBorder
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "angle-right", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "arrow-right-down", size: "small", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
   }
   static get is() { return "stzh-anchornav"; }
   static get encapsulation() { return "scoped"; }

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -175,7 +175,7 @@ export class StzhAppointments {
   async componentWillLoad() {
     this.appointmentsWatcher(this.appointments);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'appointments');
+      this.localization = await fetchTranslations(this.element, "appointments");
     }
     if (!this.dateAdapter) {
       this.dateAdapter = createGlobalAdapter(this.localization.$formats, this.localization.$globals);

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -125,7 +128,7 @@
   align-items: center;
 }
 .stzh-audio__controls, .stzh-audio__transcript {
-  border: 0.0625rem solid var(--stzh-color-grey25);
+  border: 0.0625rem solid var(--stzh-base-border-color);
   padding: var(--stzh-space-medium) var(--stzh-space-xlarge);
 }
 .stzh-audio__controls {

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

@@ -36,7 +36,7 @@ export class StzhAudio {
     const classes = {
       "stzh-audio": true
     };
-    return (h(Host, null, h("vds-media", { class: classes }, h("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h("audio", { preload: this.preload, src: this.src }, h("slot", null))), h("div", { class: "stzh-audio__controls" }, h("div", { class: "stzh-audio__loader-overlay" }, h("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { class: "stzh-audio__controls-top" }, h("vds-time-slider", { class: "stzh-audio__slider is-time" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { class: "stzh-audio__controls-bottom" }, h("stzh-tooltip", null, h("vds-play-button", { class: "stzh-audio__button is-play" }, h("stzh-icon", { class: "stzh-audio__played", name: "play" }), h("stzh-icon", { class: "stzh-audio__paused", name: "close" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__played" }, this.localization.play), h("span", { class: "stzh-audio__paused" }, this.localization.pause))), h("div", { class: "stzh-audio__time" }, h("vds-time", { type: "current" }), h("span", { class: "stzh-audio__time-separator" }, "/"), h("vds-time", { type: "duration" })), h("stzh-tooltip", null, h("vds-mute-button", { class: "stzh-audio__button is-mute" }, h("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__muted" }, this.localization.mute), h("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
+    return (h(Host, null, h("vds-media", { class: classes }, h("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h("audio", { preload: this.preload, src: this.src }, h("slot", null))), h("div", { class: "stzh-audio__controls" }, h("div", { class: "stzh-audio__loader-overlay" }, h("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { class: "stzh-audio__controls-top" }, h("vds-time-slider", { class: "stzh-audio__slider is-time" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { class: "stzh-audio__controls-bottom" }, h("stzh-tooltip", null, h("vds-play-button", { class: "stzh-audio__button is-play" }, h("stzh-icon", { class: "stzh-audio__played", name: "play-filled" }), h("stzh-icon", { class: "stzh-audio__paused", name: "pause-filled" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__played" }, this.localization.play), h("span", { class: "stzh-audio__paused" }, this.localization.pause))), h("div", { class: "stzh-audio__time" }, h("vds-time", { type: "current" }), h("span", { class: "stzh-audio__time-separator" }, "/"), h("vds-time", { type: "duration" })), h("stzh-tooltip", null, h("vds-mute-button", { class: "stzh-audio__button is-mute" }, h("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__muted" }, this.localization.mute), h("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
       h("stzh-tooltip", { content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h("button", { class: {
           "stzh-audio__button is-transcript": true,
           "is-active": this.transcriptShown

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -5,6 +5,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -316,10 +319,10 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-button--is-disabled .stzh-button__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }
 .stzh-button--size-small, .stzh-button--size-tiny {
   font-size: var(--stzh-font-micro-font-size);

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

@@ -59,15 +59,20 @@ export class StzhButton {
     this.name = "";
     this.value = "";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
+    this.download = undefined;
     this.type = "button";
     this.disabled = false;
     this.active = false;
     this.label = "";
     this.effect = "default";
     this.iconOnly = false;
+    this.linkAccesskey = undefined;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
   }
   /** Focus button */
   async setFocus() {
@@ -106,12 +111,15 @@ export class StzhButton {
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
         this.type === "radio" ?
-          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
           :
-            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -379,6 +387,23 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
       "target": {
         "type": "string",
         "mutable": false,
@@ -397,6 +422,23 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Download attribute of link (if `href` used)"
+        },
+        "attribute": "download",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -505,6 +547,23 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "false"
       },
+      "linkAccesskey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Access key of link (usually a number e.g. 1)"
+        },
+        "attribute": "link-accesskey",
+        "reflect": false
+      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,
@@ -539,6 +598,40 @@ export class StzhButton {
         "attribute": "a11y-describedby",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "a11yExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria expanded of link/button"
+        },
+        "attribute": "a11y-expanded",
+        "reflect": true
+      },
+      "a11yControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria controls of link/button"
+        },
+        "attribute": "a11y-controls",
+        "reflect": false
       }
     };
   }

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -98,8 +101,11 @@
   --box-shadow: var(--stzh-box-shadow-popover);
   --border: 0.0625rem solid var(--stzh-base-border-color);
   --border-radius: 0.1875rem;
+  --content-min-height: 7.5rem;
   --dnd-visibility: hidden;
   --dnd-opacity: 0;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--border-radius);
 }
@@ -109,7 +115,7 @@
 :host.is-ghost::after, .is-ghost :host::after {
   border-radius: var(--border-radius);
 }
-:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
+:host[href]:hover, :host[href]:focus-within, :host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
   --box-shadow: var(--stzh-box-shadow-overlay);
 }
 :host.is-ghost, .is-ghost :host {
@@ -127,6 +133,7 @@
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
 }
 :host ::slotted([slot=image]) {
+  width: 100%;
   max-width: 100%;
 }
 :host ::slotted(img[slot=image]) {
@@ -152,12 +159,42 @@
   padding-left: var(--stzh-space-xsmall);
 }
 
+:host ::slotted([slot=heading]),
+.stzh-card__title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted([slot=heading]),
+.stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted([slot=heading]),
+.stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
+  }
+}
+
 .stzh-card {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
   background-color: var(--stzh-color-white);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   border: var(--border);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
+  /* Has Link */
   /* Interactive Subtitle */
   /* Collapsed (Header) */
   /* Starred */
@@ -175,6 +212,10 @@
 }
 .stzh-card__content-wrapper {
   position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--content-min-height);
 }
 .stzh-card__dnd {
   --size: var(--stzh-icon-size-xsmall);
@@ -253,28 +294,12 @@
 .stzh-card__title, .stzh-card__subtitle {
   margin: 0;
 }
-.stzh-card__title {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: normal;
-  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
-  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
-  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
-  color: var(--stzh-base-lead-color);
-}
-@media screen and (min-width: 600px) {
-  .stzh-card__title {
-    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
-    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
-  }
+.stzh-card__title-link {
+  color: inherit;
+  text-decoration: none;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-card__title {
-    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
-    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
-  }
+.stzh-card__image-link {
+  display: block;
 }
 .stzh-card__subtitle {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
@@ -303,6 +328,9 @@
   position: absolute;
   left: 0;
 }
+.stzh-card__content {
+  flex-grow: 1;
+}
 .stzh-card__content:not(:empty) {
   padding: var(--stzh-space-medium);
 }
@@ -353,6 +381,30 @@
 .stzh-card__card-action-popover {
   --width: auto;
 }
+.stzh-card--has-link .stzh-card__title-link {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  text-decoration: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+.stzh-card--has-link .stzh-card__title-link::before {
+  transition: all var(--stzh-base-transition-animation-speed);
+}
+.stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link, .stzh-card--has-link .stzh-card__title-link:hover, .stzh-card--has-link .stzh-card__title-link:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:focus::before, .stzh-card--has-link .stzh-card__title-link:focus::before {
+  background-color: var(--stzh-color-primary4);
+}
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle {
   cursor: pointer;
   padding: 0;

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

@@ -3,6 +3,7 @@ import { hasSlot, setPropsIfNull } from "../../utils/utils";
 import { media } from '../../utils/media-utils';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
+ * @slot heading - Slot for heading
  * @slot image - Slot for optional image element
  * @slot content - Slot for content for any elements
  * @slot meta - Slot for meta elements (status or chip)
@@ -110,6 +111,12 @@ export class StzhCard {
     this.handleSelectionChange = (event) => {
       this.checked = event.detail.checked;
     };
+    this.cardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-card",
+        originalEvent
+      });
+    };
     this.localization = undefined;
     this.collapsed = false;
     this.starred = false;
@@ -117,6 +124,8 @@ export class StzhCard {
     this.selectable = false;
     this.checked = false;
     this.name = "";
+    this.href = undefined;
+    this.target = undefined;
     this.value = "";
     this.disabled = false;
     this.heading = "";
@@ -165,6 +174,9 @@ export class StzhCard {
       this._footerActions = newValue;
     }
   }
+  collapsedWatcher() {
+    this.handleResize();
+  }
   findSortableChildElement() {
     const sortable = this.element.closest("stzh-sortable");
     if (sortable) {
@@ -214,6 +226,7 @@ export class StzhCard {
     const contentUsed = hasSlot(this.element, "content");
     const classes = {
       "stzh-card": true,
+      "stzh-card--has-link": !!this.href,
       "stzh-card--has-image": imageUsed,
       "stzh-card--has-content": contentUsed,
       "stzh-card--has-subtitle": !!this.subtitle,
@@ -240,7 +253,7 @@ export class StzhCard {
     // const headerActions = [
     //   ...this._headerActions
     // ];
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("slot", { name: "image" }), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, this.heading), this._subtitles.length > 0 &&
+    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
       h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
         "stzh-card__card-action": true,
         "is-button": true,
@@ -405,6 +418,40 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "\"\""
       },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href of card"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "target if the button is used as link (if href used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
       "value": {
         "type": "string",
         "mutable": true,
@@ -453,7 +500,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading"
+          "text": "Heading (or use heading slot instead)"
         },
         "attribute": "heading",
         "reflect": false,
@@ -635,6 +682,26 @@ export class StzhCard {
   }
   static get events() {
     return [{
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event (if href is used)"
+        },
+        "complexType": {
+          "original": "StzhCardClickEvent",
+          "resolved": "{ component: \"stzh-card\"; originalEvent: MouseEvent; }",
+          "references": {
+            "StzhCardClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
         "method": "stzhCollapse",
         "name": "stzhCollapse",
         "bubbles": true,
@@ -727,15 +794,36 @@ export class StzhCard {
       }, {
         "propName": "footerActions",
         "methodName": "footerActionsWatcher"
+      }, {
+        "propName": "collapsed",
+        "methodName": "collapsedWatcher"
       }];
   }
   static get listeners() {
     return [{
+        "name": "appload",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
         "name": "resize",
         "method": "handleResize",
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "DOMContentLoaded",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "load",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -8,7 +8,7 @@ export default {
   component: 'stzh-card',
   parameters: {
     actions: {
-      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
+      handles: ['stzhCollapse', 'stzhClick', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
     },
     layout: 'padded',
     docs: {