@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -59,6 +59,7 @@ export class StzhButton {
     this.name = "";
     this.value = "";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
     this.download = undefined;
     this.type = "button";
@@ -67,8 +68,11 @@ export class StzhButton {
     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() {
@@ -107,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, download: this.download, 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"; }
@@ -380,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,
@@ -523,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,
@@ -557,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-button/stzh-button.stories.js

@@ -32,17 +32,8 @@ const Template = (args) => (
   <stzh-button {...args}>Button Text</stzh-button>
 );
 
-const TemplateIcon = (args) => (
-  <stzh-button {...args}>
-    <stzh-icon name="filtering" slot="icon"></stzh-icon>
-    Button Text
-  </stzh-button>
-);
-
 const TemplateJustIcon = (args) => (
-  <stzh-button {...args}>
-    <stzh-icon name="filtering" slot="icon"></stzh-icon>
-  </stzh-button>
+  <stzh-button {...args}></stzh-button>
 );
 
 export const Default = Template.bind({});
@@ -55,12 +46,21 @@ AsLink.args = {
   target: '_blank'
 };
 
-export const WithIcon = TemplateIcon.bind({});
+export const WithIcon = Template.bind({});
 WithIcon.args = {
+  icon: 'filtering'
 };
 
 export const JustIcon = TemplateJustIcon.bind({});
 JustIcon.args = {
   'icon-only': true,
-  label: 'Button Text'
+  label: 'Button Text',
+  icon: 'filtering'
+};
+
+export const CTA = Template.bind({});
+CTA.args = {
+  effect: 'cta',
+  icon: 'arrow-right-long',
+  'icon-position': 'right'
 };

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

@@ -263,6 +263,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   background: transparent;
   border: 0.0625rem solid var(--stzh-color-grey13);
   border-radius: 50%;

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

@@ -101,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);
 }
@@ -112,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 {
@@ -130,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]) {
@@ -155,17 +159,61 @@
   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 */
+  /* Is collapsible */
   /* Collapsed (Header) */
   /* Starred */
   /** Hidden header / footer border */
 }
+@media screen and (max-width: 1023px) {
+  .stzh-card .vshow-medium {
+    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;
+  }
+}
 @media screen and (max-width: 1023px) {
   .stzh-card .show-medium {
     display: none;
@@ -178,6 +226,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);
@@ -256,28 +308,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));
@@ -306,6 +342,9 @@
   position: absolute;
   left: 0;
 }
+.stzh-card__content {
+  flex-grow: 1;
+}
 .stzh-card__content:not(:empty) {
   padding: var(--stzh-space-medium);
 }
@@ -333,6 +372,10 @@
     padding: var(--stzh-space-xlarge);
   }
 }
+.stzh-card__footer-arrow {
+  --size: var(--stzh-icon-size-medium);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
 .stzh-card__card-actions {
   display: inline-flex;
   white-space: nowrap;
@@ -356,8 +399,36 @@
 .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-link:hover .stzh-card__footer-arrow {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle {
   cursor: pointer;
+  font-family: inherit;
   padding: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -370,6 +441,20 @@
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
+.stzh-card--is-collapsible .stzh-card__header {
+  cursor: pointer;
+}
+.stzh-card--is-collapsed .vhide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .vhide-when-collapsed {
+  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-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
   display: none;
 }

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

@@ -3,9 +3,11 @@ 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)
+ * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)
  */
 export class StzhCard {
   constructor() {
@@ -110,6 +112,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,8 +125,11 @@ export class StzhCard {
     this.selectable = false;
     this.checked = false;
     this.name = "";
+    this.href = undefined;
+    this.target = undefined;
     this.value = "";
     this.disabled = false;
+    this.withArrow = false;
     this.heading = "";
     this.subtitle = "";
     this.headerActions = [];
@@ -165,6 +176,9 @@ export class StzhCard {
       this._footerActions = newValue;
     }
   }
+  collapsedWatcher() {
+    this.handleResize();
+  }
   findSortableChildElement() {
     const sortable = this.element.closest("stzh-sortable");
     if (sortable) {
@@ -214,12 +228,14 @@ 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,
       "stzh-card--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
       "stzh-card--has-hidden-header-border": this.hideHeaderBorder,
       "stzh-card--has-hidden-footer-border": this.hideFooterBorder,
+      "stzh-card--is-collapsible": this.collapsible,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
       "stzh-card--is-checked": this.checked
@@ -240,7 +256,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,
@@ -248,8 +264,8 @@ export class StzhCard {
         "hide-when-collapsed": !action.onlyCollapseText,
         "hide-text-when-collapsed": action.onlyCollapseText
       }, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
-        "show-medium": action.onlyCollapseText,
-        "hide-when-collapsed": action.onlyCollapseText
+        "vshow-medium": action.onlyCollapseText,
+        "vhide-when-collapsed": action.onlyCollapseText
       } }, action.label)))), this.starrable &&
       h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
       h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
@@ -259,9 +275,10 @@ export class StzhCard {
         h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), nonCollapsingTextHeaderActions.map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); } }, action.label))), sortableActionsEnabled &&
         h(Fragment, null, !isFirstItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
-          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, this._footerActions.length > 0 &&
+          h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
       h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
-      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))));
+      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
+      h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
   }
   static get is() { return "stzh-card"; }
   static get encapsulation() { return "scoped"; }
@@ -405,6 +422,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,
@@ -441,6 +492,24 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "withArrow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card arrow is shown in footer area"
+        },
+        "attribute": "with-arrow",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "heading": {
         "type": "string",
         "mutable": false,
@@ -453,7 +522,7 @@ export class StzhCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading"
+          "text": "Heading (or use heading slot instead)"
         },
         "attribute": "heading",
         "reflect": false,
@@ -635,6 +704,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 +816,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: {